При получении данных с удаленного сервера ответ сервера часто будет в формате JSON. В этом кратком совете я покажу, как вы можете использовать JavaScript для анализа ответа сервера, чтобы получить доступ к нужным вам данным.
Этот процесс обычно состоит из двух шагов: декодирование данных в нативную структуру (такую как массив или объект), затем использование одного из встроенных методов JavaScript для перебора этой структуры данных. В этой статье я рассмотрю оба шага, используя множество исполняемых примеров.
Что такое JSON?
Прежде чем мы рассмотрим, как работать с JSON, давайте на секунду поймем, что это такое (и чем оно не является).
JSON расшифровывается как J ava S cript Object Notation. Это независимый от языка текстовый формат, который обычно используется для передачи данных в
Есть два способа хранения данных в формате 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.
Использование API выборки
Хотя описанный выше метод с использованием XMLHttpRequestобъекта работает просто отлично, он может довольно быстро стать громоздким. Мы можем сделать лучше.
Fetch API — это API на основе Promise, который обеспечивает более чистый и лаконичный синтаксис и помогает избежать ада обратных вызовов. Он предоставляет 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`) ;
}) ;
//
//
//
//
//...
Кроме того, вы, конечно, можете использовать любой из рассмотренных выше методов, чтобы перебрать все свойства объекта и вывести их на консоль:
repos.forEach ((repo) => {
Object.entries (repo).forEach (([key, value]) => {
console.log (`${key}: ${value}`) ;
}) ;
}) ;
// name:
// full_name: jameshibbard/
// private: false
//...
Вывод
В этом кратком совете мы рассмотрели, что такое JSON. Я продемонстрировал, как преобразовать ответ JSON от сервера в нативную структуру данных (такую как массив или объект) и как пройти через такую структуру, чтобы получить доступ к содержащимся в ней данным.
Если у вас возникли проблемы с
