JSON (объектная нотация JavaScript) - это набор правил форматирования текста, который хранит и передает данные как машиночитаемым, так и человекочитаемым способом; это легкий формат обмена данными.

Главное, что нужно знать о JSON:

  • Он состоит из ключей и значений.
  • ключ обычно представляет собой строку, заключенную в кавычки "”, но это не обязательно
  • значение может быть строкой, числом, логическим выражением, массивом или объектом.

Вместе ключи и значения составляют пару ключ-значение, которая имеет очень специфический синтаксис: Key: Value. Если их несколько, они разделяются запятыми (см. Пример ниже). Рекомендуется поддерживать единообразный синтаксис во всем JSON.

В приведенном ниже примере вы увидите, что выделенный ключ заключен в кавычки, а также его соответствующее значение.

NB: JSON не может хранить функции, но может хранить примитивы.

Вы можете получить доступ к значениям в JSON, вызвав один из ключей. Например, если JSON был сохранен в переменной с именем json, вот один из способов его вызова и то, что этот вызов даст:

Вы также можете преобразовать весь объект JSON в строку и сделать обратное (преобразовать строку в JSON) с помощью двух функций:

  • JSON.stringify () - превращает JSON в строку
  • JSON.parse () - превращает строку в JSON

Время упражнений!

Вот подробности задачи:

… А вот часть, где я показываю готовый код (в двух частях) и объясняю, что происходит:

Строки 1–2: это глобальные переменные, которые будут заполнены значениями API.

Строка 4: прослушиватель событий здесь ожидает щелчка по кнопке (которая находится в HTML); когда он услышит этот щелчок, он позвонит getUser

Строка 5: извлекает значение из поля ввода - в нашем случае username

Строка 8: Функция getUser использует вызов fetch, который я упоминал в Уроке 3: AJAX. Он принимает name и прикрепляет его к концу URL-адреса в строке 9.

Строка 10: эта функция then преобразует ответ в JSON (и этот объект JSON затем используется в качестве параметра в строке 13).

Строка 14: Здесь значение j присваивается глобальной переменной response

Строки 15–16: звонки assignValues и getFollowers.

Строка 20: Эта функция представляет собой набор селекторов! Ура, кое-что мы видели раньше!

Строка 21: это получает загрузчик и заставляет его уйти (с display:none) после того, как обещание было разрешено (также известное как когда оно проходит через функцию then).

Строки 23–28 анализируют ответ и извлекают из JSON все, что им нужно.

Немного на строках 23 и 28!

Строка 23: Здесь мы хотим установить в качестве источника URL-адрес аватара (response.avatar_url), чтобы получить URL-адрес изображения.

Строка 28: это то же самое, что и строки 24–27, за исключением того, что мы добавили строку (вы увидите «Подписчики:» на примере страницы в конце этого сообщения).

Строка 31: функция getFollowers использует другой вызов fetch (строка 32)!

Строка 33: первая then функция, которая, как вы уже догадались, анализирует JSON.

Строка 37: значение f присваивается глобальной переменной followers.

Строки 43–44: forEach вызывается на f; цикл forEach принимает функцию, что означает, что для каждого f в followers будет выполняться document.createElement

Строка 44: li здесь относится к тегам ul в HTML с идентификатором list:

Строка 45: Дочерний элемент li состоит из двух частей: href, в котором указан URL-адрес профиля каждого подписчика, и img src, в котором есть изображение (которое при наведении курсора на него показывает имя пользователя).

Строка 48: будет получен список и добавлен дочерний элемент li к ul

Ура, мы выжили! Вот как выглядит готовая страница в браузере!

Далее, Scope!