JSON ответ в JavaScript

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

Этот процесс обычно состоит из двух этапов: декодирование данных в собственную структуру (например, массив или объект), а затем использование одного из встроенных методов JavaScript для циклического просмотра этой структуры данных. В этой статье я расскажу об обоих этапах, используя множество рабочих примеров.

Содержание

Что такое JSON?
Получение JSON из удаленного API
Используйте for…in
Используйте Object.entries, Object.valuesилиObject.entries
Использование Fetch API
Работа с массивом
Заключение

Что такое JSON?

Прежде чем мы рассмотрим, как работать с JSON, давайте на секунду поймем, что это такое (а что нет).

JSON расшифровывается как J ava S cript O bject N otation. Это не зависящий от языка текстовый формат, который обычно используется для передачи данных в веб-приложениях. JSON был вдохновлен нотацией JavaScript Object Literal, но между ними есть различия. Например, в JSON ключи должны быть заключены в двойные кавычки, в то время как в объектных литералах это не так.

Есть два способа хранения данных в JSON:

набор пар имя / значение (также известный как объект JSON)
упорядоченный список значений (он же массив JSON)

При получении данных с веб-сервера данные всегда представляют собой строку, а это означает, что ваша задача — преобразовать их в структуру данных, с которой вы можете работать.

Если вы хотите узнать больше о том, как работает JSON, посетите веб-сайт JSON.

Получение JSON из удаленного API

В следующих примерах мы будем использовать фантастический API icanhazdadjoke. Как вы можете прочитать в документации, выполнение запроса GET с установленным Acceptзаголовком application/jsonприведет к тому, что API вернет полезную нагрузку JSON.

Начнем с простого примера:

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText);
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

// string
// {"id":"daaUfibh","joke":"Why was the big cat disqualified from the race? Because it was a cheetah.","status":200}

Как видим, сервер вернул нам строку. Нам нужно будет преобразовать это в объект JavaScript, прежде чем мы сможем перебрать его свойства. Мы можем сделать это с помощью JSON.parse () :

if (xhr.readyState === XMLHttpRequest.DONE) {
  const res = JSON.parse(xhr.responseText);
  console.log(res);
};

// Object { id: "fiyPR7wPZDd", joke: "When does a joke become a dad joke? When it becomes apparent.", status: 200 }

Как только мы получили наш ответ в виде объекта JavaScript, мы можем использовать несколько методов для его обхода.

Используйте for…in

Цикл for… in выполняет итерацию по всем перечислимым свойствам объекта:

const res = JSON.parse(xhr.responseText);

for (const key in res){
  if(obj.hasOwnProperty(key)){
    console.log(`${key} : ${res[key]}`)
  }
}

// id : H6Elb2LBdxc
// joke : What's blue and not very heavy?  Light blue.
// status : 200

Имейте в for…of виду, что циклы будут повторяться по всей цепочке прототипов, поэтому здесь мы используем, hasOwnPropertyчтобы гарантировать, что свойство принадлежит нашему resобъекту.

Используйте Object.entries, Object.valuesилиObject.entries

Альтернативный подход к вышеизложенному — использовать один из Object.keys (), Object.values () или Object.entries (). Они вернут массив, который мы затем можем перебирать.

Давайте посмотрим на использование Object.entries. Это возвращает массив пар ключ / значение объекта, который мы ему передаем:

const res = JSON.parse(xhr.responseText);

Object.entries(res).forEach((entry) => {
  const [key, value] = entry;
  console.log(`${key}: ${value}`);
});

// id: SvzIBAQS0Dd 
// joke: What did the pirate say on his 80th birthday? Aye Matey!
// status: 200

Обратите внимание, что const [key, value] = entry;синтаксис является примером деструктуризации массива, который был представлен в языке в ES2015.

Это гораздо более кратко, позволяет избежать вышеупомянутой проблемы с прототипом и является моим предпочтительным методом перебора ответов JSON.

Использование Fetch API

Хотя описанный выше метод с использованием XMLHttpRequestобъекта работает нормально, он может быстро стать громоздким. Мы можем лучше.

Fetch API является Promise на основе API, что позволяет более чистое и синтаксис сжатого и помогает держать вас от обратного вызова ад. Он предоставляет fetch()метод, определенный для windowобъекта, который можно использовать для выполнения запросов. Этот метод возвращает обещание, которое можно использовать для получения ответа на запрос.

Давайте перепишем наш предыдущий пример, чтобы использовать его:

(async () => {
  const res = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const json = await res.json();
  Object.entries(json).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();

// id: 2wkykjyIYDd
// joke: What did the traffic light say to the car as it passed? "Don't look I'm changing!"
// status: 200

Fetch API возвращает поток ответов. Это не JSON, поэтому вместо того, чтобы пытаться вызвать JSON.parse()его, нам нужно использовать его функцию response.json (). Это возвращает обещание, которое разрешается в результате синтаксического анализа основного текста ответа как JSON.

Работа с массивом

Как упоминалось в верхней части статьи, упорядоченный список значений (он же массив) является допустимым JSON, поэтому, прежде чем мы закончим, давайте посмотрим, как поступить с таким ответом.

В последнем примере мы будем использовать REST API GitHub, чтобы получить список пользовательских репозиториев:

(async () => {
  async function getRepos(username) {
    const url = `https://api.github.com/users/${username}/repos`;

    const response = await fetch(url);
    const repositories = await response.json();

    return repositories;
  }

  const repos = await getRepos('jameshibbard');
  console.log(repos);
})();

// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Как видите, API вернул массив объектов. Чтобы получить доступ к каждому из отдельных объектов, мы можем использовать обычный forEachметод:

repos.forEach((repo) => {
  console.log(`{$repo.name} has ${repo.stargazers_count} stars`);
});

// Advanced-React has 0 stars 
// angular2-education has 0 stars
// aurelia-reddit-client has 3 stars
// authentication-with-devise-and-cancancan has 20 stars
// ...

В качестве альтернативы вы, конечно, можете использовать любой из методов, описанных выше, чтобы просмотреть все свойства объекта и записать их в консоль:

repos.forEach((repo) => {
  Object.entries(repo).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
});

// name: Advanced-React
// full_name: jameshibbard/Advanced-React
// private: false
// ...

Заключение

В этой быстрой подсказке мы рассмотрели, что такое JSON. Я продемонстрировал, как преобразовать ответ JSON от сервера в собственную структуру данных (например, массив или объект) и как пройти через такую структуру, чтобы получить доступ к содержащимся в ней данным.

Если у вас возникли проблемы с чем-либо, представленным в этой статье, почему бы не зайти на форумы SitePoint, где есть много дружелюбных людей, которые могут вам помочь.

Читайте также: QR и штрих-коды в Python