Как получить response json js

js fetch как получить данные

fetch — это метод JavaScript для отправки запросов на сервер и получения ответов. Он используется для получения данных с сервера в формате JSON, XML, HTML и других форматах.

Пример использования fetch для получения данных в формате JSON:

fetch('https://example.com/data.json') .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error)); 

Что делает метод .json()

Если не сделать response.json() — приходит пустой массив. Исходя из этого у меня возник вопрос — что именно делает метод .json()? Превращает json формат в объект? но для этого же есть JSON.parse() и он мне не помог, когда я поставил его вместо .json. Заранее спасибо!

Отслеживать
задан 25 авг 2021 в 13:34
47 1 1 серебряный знак 6 6 бронзовых знаков
Привет, learn.javascript.ru/fetch тут подробно описано
25 авг 2021 в 13:35

и еще, что означает => это сокращенная запись функции что ли, но ведь нету круглых скобок даже. Или это уникальный синтаксис для промисов?

25 авг 2021 в 13:35

Спасибо за ответ, там написано только response.json() – декодирует ответ в формате JSON, мне это ни о чем не говорит.

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

Fetch API предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод fetch() (en-US), который позволяет легко и логично получать ресурсы по сети асинхронно.

Подобная функциональность ранее достигалась с помощью XMLHttpRequest . Fetch представляет собой лучшую альтернативу, которая может быть легко использована другими технологиями, такими как Service Workers (en-US). Fetch также обеспечивает единое логическое место для определения других связанных с HTTP понятий, такие как CORS и расширения для HTTP.

Обратите внимание, fetch спецификация отличается от jQuery.ajax() в основном в двух пунктах:

• Promise возвращаемый вызовом fetch() не перейдёт в состояние «отклонено» из-за ответа HTTP, который считается ошибкой, даже если ответ HTTP 404 или 500. Вместо этого, он будет выполнен нормально (с значением false в статусе ok ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.
• По умолчанию, fetch не будет отправлять или получать cookie файлы с сервера, в результате чего запросы будут осуществляться без проверки подлинности, что приведёт к неаутентифицированным запросам, если сайт полагается на проверку пользовательской сессии (для отправки cookie файлов в аргументе init options должно быть задано значение свойства credentials отличное от значения по умолчанию omit ).

Примечание: 25 августа 2017 г. в спецификации изменилось значение по умолчанию свойства credentials на same-origin . Firefox применяет это изменение с версии 61.0b13.

Базовый запрос на получение данных действительно прост в настройке. Взгляните на следующий код:

fetch('http://example.com/movies.json') .then((response) => < return response.json(); >) .then((data) => < console.log(data); >);

Здесь мы забираем JSON файл по сети и выводим его содержимое в консоль. Самый простой способ использования fetch() заключается в вызове этой функции с одним аргументом — строкой, содержащей путь к ресурсу, который вы хотите получить — которая возвращает promise, содержащее ответ (объект Response ).

Конечно, это просто HTTP-ответ, а не фактический JSON. Чтобы извлечь содержимое тела JSON из ответа, мы используем json() (en-US) метод (определён миксином Body , который реализован в объектах Request и Response .)

Примечание: Миксин Body имеет подобные методы для извлечения других типов контента; см. раздел Тело.

Fetch-запросы контролируются посредством директивы connect-src (Content Security Policy (en-US) ), а не директивой извлекаемых ресурсов.

Установка параметров запроса

Метод fetch() может принимать второй параметр — объект init , который позволяет вам контролировать различные настройки:

// Пример отправки POST запроса: async function postData(url = "", data = >)  // Default options are marked with * const response = await fetch(url,  method: "POST", // *GET, POST, PUT, DELETE, etc. mode: "cors", // no-cors, *cors, same-origin cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached credentials: "same-origin", // include, *same-origin, omit headers:  "Content-Type": "application/json", // 'Content-Type': 'application/x-www-form-urlencoded', >, redirect: "follow", // manual, *follow, error referrerPolicy: "no-referrer", // no-referrer, *client body: JSON.stringify(data), // body data type must match "Content-Type" header >); return await response.json(); // parses JSON response into native JavaScript objects > postData("https://example.com/answer",  answer: 42 >).then((data) =>  console.log(data); // JSON data parsed by `response.json()` call >); 

С подробным описанием функции и полным списком параметров вы можете ознакомиться на странице fetch() (en-US).

Отправка запроса с учётными данными

Чтобы браузеры могли отправлять запрос с учётными данными (даже для cross-origin запросов), добавьте credentials: ‘include’ в объект init , передаваемый вами в метод fetch() :

fetch("https://example.com",  credentials: "include", >); 

Если вы хотите отправлять запрос с учётными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте credentials: ‘same-origin’.

// Вызывающий скрипт принадлежит источнику 'https://example.com' fetch("https://example.com",  credentials: "same-origin", >); 

Напротив, чтобы быть уверенным, что учётные данные не передаются с запросом, используйте credentials: ‘omit’:

fetch("https://example.com",  credentials: "omit", >); 

Отправка данных в формате JSON

При помощи fetch() (en-US) можно отправлять POST-запросы в формате JSON.

const url = "https://example.com/profile"; const data =  username: "example" >; try  const response = await fetch(url,  method: "POST", // или 'PUT' body: JSON.stringify(data), // данные могут быть 'строкой' или ! headers:  "Content-Type": "application/json", >, >); const json = await response.json(); console.log("Успех:", JSON.stringify(json)); > catch (error)  console.error("Ошибка:", error); > 

Загрузка файла на сервер

На сервер можно загрузить файл, используя комбинацию HTML-элемента , FormData() и fetch() .

const formData = new FormData(); const fileField = document.querySelector('input[type="file"]'); formData.append("username", "abc123"); formData.append("avatar", fileField.files[0]); try  const response = await fetch("https://example.com/profile/avatar",  method: "PUT", body: formData, >); const result = await response.json(); console.log("Успех:", JSON.stringify(result)); > catch (error)  console.error("Ошибка:", error); > 

Загрузка нескольких файлов на сервер

На сервер можно загрузить несколько файлов, используя комбинацию HTML-элемента , FormData() и fetch() .

const formData = new FormData(); const photos = document.querySelector('input[type="file"][multiple]'); formData.append("title", "Мой отпуск в Вегасе"); for (let i = 0; i  photos.files.length; i++)  formData.append("photos", photos.files[i]); > try  const response = await fetch("https://example.com/posts",  method: "POST", body: formData, >); const result = await response.json(); console.log("Успех:", JSON.stringify(result)); > catch (error)  console.error("Ошибка:", error); > 

Обработка текстового файла построчно

Фрагменты данных, получаемые из ответа, не разбиваются на строки автоматически (по крайней мере с достаточной точностью) и представляют собой не строки, а объекты Uint8Array (en-US). Если вы хотите загрузить текстовый файл и обрабатывать его по мере загрузки построчно, то на вас самих ложится груз ответственности за обработку всех упомянутых моментов. Как пример, далее представлен один из способов подобной обработки с помощью создания построчного итератора (для простоты приняты следующие допущения: текст приходит в кодировке UTF-8 и ошибки получения не обрабатываются).

async function* makeTextFileLineIterator(fileURL)  const utf8Decoder = new TextDecoder("utf-8"); let response = await fetch(fileURL); let reader = response.body.getReader(); let  value: chunk, done: readerDone > = await reader.read(); chunk = chunk ? utf8Decoder.decode(chunk) : ""; let re = /\n|\r|\r\n/gm; let startIndex = 0; let result; for (;;)  let result = re.exec(chunk); if (!result)  if (readerDone)  break; > let remainder = chunk.substr(startIndex); ( value: chunk, done: readerDone > = await reader.read()); chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : ""); startIndex = re.lastIndex = 0; continue; > yield chunk.substring(startIndex, result.index); startIndex = re.lastIndex; > if (startIndex  chunk.length)  //последняя строка не имеет символа перевода строки в конце yield chunk.substr(startIndex); > > for await (let line of makeTextFileLineIterator(urlOfFile))  processLine(line); > 

Проверка успешности запроса

В методе fetch() (en-US) promise будет отклонён (reject) с TypeError , когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности fetch() будет включать проверку того, что promise успешен (resolved), затем проверку того, что значение свойства Response.ok (en-US) является true. Код будет выглядеть примерно так:

try  const response = await fetch("flowers.jpg"); if (!response.ok)  throw new Error("Ответ сети был не ok."); > const myBlob = await response.blob(); const objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; > catch (error)  console.log("Возникла проблема с вашим fetch запросом: ", error.message); > 

Составление своего объекта запроса

Вместо передачи пути ресурса, который вы хотите запросить вызовом fetch(), вы можете создать объект запроса, используя конструктор Request() (en-US), и передать его в fetch() аргументом:

const myHeaders = new Headers(); const myInit =  method: "GET", headers: myHeaders, mode: "cors", cache: "default", >; const myRequest = new Request("flowers.jpg", myInit); const response = await fetch(myRequest); const myBlob = await response.blob(); const objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; 

Конструктор Request() принимает точно такие же параметры, как и метод fetch(). Вы даже можете передать существующий объект запроса для создания его копии:

const anotherRequest = new Request(myRequest, myInit); 

Довольно удобно, когда тела запроса и ответа используются единожды (прим.пер.: «are one use only»). Создание копии как показано позволяет вам использовать запрос/ответ повторно, при изменении опций init, при желании. Копия должна быть сделана до прочтения тела, а чтение тела в копии также пометит его прочитанным в исходном запросе.

Примечание: Также есть метод clone() (en-US), создающий копии. Оба метода создания копии прекратят работу с ошибкой если тело оригинального запроса или ответа уже было прочитано, но чтение тела клонированного ответа или запроса не приведёт к маркировке оригинального.

Заголовки

Интерфейс Headers (en-US) позволяет вам создать ваш собственный объект заголовков через конструктор Headers() (en-US). Объект заголовков — простая мультикарта имён-значений:

const content = "Hello World"; const myHeaders = new Headers(); myHeaders.append("Content-Type", "text/plain"); myHeaders.append("Content-Length", content.length.toString()); myHeaders.append("X-Custom-Header", "ProcessThisImmediately"); 

То же может быть достигнуто путём передачи массива массивов или литерального объекта конструктору:

const myHeaders = new Headers( "Content-Type": "text/plain", "Content-Length": content.length.toString(), "X-Custom-Header": "ProcessThisImmediately", >); 

Содержимое может быть запрошено и извлечено:

.log(myHeaders.has("Content-Type")); // true console.log(myHeaders.has("Set-Cookie")); // false myHeaders.set("Content-Type", "text/html"); myHeaders.append("X-Custom-Header", "AnotherValue"); console.log(myHeaders.get("Content-Length")); // 11 console.log(myHeaders.get("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"] myHeaders.delete("X-Custom-Header"); console.log(myHeaders.get("X-Custom-Header")); // [ ] 

Некоторые из этих операций могут быть использованы только в ServiceWorkers (en-US), но они предоставляют более удобный API для манипуляции заголовками.

Все методы Headers выбрасывают TypeError, если имя используемого заголовка не является валидным именем HTTP Header. Операции мутации выбросят TypeError если есть защита от мутации (смотрите ниже) (прим.пер.: «if there is an immutable guard»). В противном случае они прерываются молча. Например:

const myResponse = Response.error(); try  myResponse.headers.set("Origin", "http://mybank.com"); > catch (e)  console.log("Не могу притвориться банком!"); > 

Хорошим вариантом использования заголовков является проверка корректности типа контента перед его обработкой. Например:

try  const response = await fetch(myRequest); const contentType = response.headers.get("content-type"); if (!contentType || !contentType.includes("application/json"))  throw new TypeError("Ой, мы не получили JSON!"); > const json = await response.json(); /_ Дальнейшая обработка JSON _/; > catch (error)  console.log(error); > 

Защита

С тех пор как заголовки могут передаваться в запросе, приниматься в ответе и имеют различные ограничения в отношении того, какая информация может и должна быть изменена, заголовки имеют свойство guard. Это не распространяется на Web, но влияет на то, какие операции мутации доступны для объекта заголовков.

none: по умолчанию.request: защита объекта заголовков, полученного по запросу ( Request.headers (en-US)).request-no-cors: защита объекта заголовков, полученного по запросу созданного с Request.mode no-cors.response: защита Headers полученных от ответа ( Response.headers (en-US)).immutable: в основном, используется в ServiceWorkers; делает объект заголовков read-only.

Примечание: вы не можете добавить или установить request защищаемые Headers’ заголовок Content-Length. Аналогично, вставка Set-Cookie в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.

Как вы видели выше, экземпляр Response будет возвращён когда fetch() промис будет исполнен.

Свойства объекта-ответа которые чаще всего используются:

Response.status (en-US) — Целочисленное (по умолчанию 200) содержит код статуса ответа. Response.statusText (en-US) — Строка (по умолчанию»OK»), которая соответствует HTTP коду статуса. Response.ok (en-US) — как сказано ранее, это короткое свойство для упрощения проверки на то что статус ответа находится где-то между 200-299 включительно. Это свойство типа Boolean (en-US).

Они так же могут быть созданы с помощью JavaScript, но реальная польза от этого есть только при использовании сервис-воркеров (en-US), когда вы предоставляете собственный ответ на запрос с помощью метода respondWith() (en-US):

const myBody = new Blob(); addEventListener("fetch", function (event)  // ServiceWorker перехватывает fetch event.respondWith( new Response(myBody,  headers:  "Content-Type": "text/plain" >, >), ); >); 

Конструктор Response() принимает два необязательных аргумента — тело для ответа и объект init (аналогичный тому, который принимает Request() (en-US))

Примечание: Метод error() (en-US) просто возвращает ответ об ошибке. Аналогично, redirect() (en-US) возвращает ответ, приводящий к перенаправлению на указанный URL. Они также относятся только к Service Workers.

Тело

Запрос и ответ могут содержать данные тела. Тело является экземпляром любого из следующих типов:

Body примесь определяет следующие методы для извлечения тела (реализованы как для Request так и для Response ). Все они возвращают promise, который в конечном итоге исполняется и выводит содержимое.

Это делает использование нетекстовых данных более лёгким, чем при XMR.

В запросе можно установить параметры для отправки тела запроса:

const form = new FormData(document.getElementById("login-form")); fetch("/login",  method: "POST", body: form, >); 

Параметры request и response (and by extension the fetch() function), по возможности возвращают корректные типы данных. Параметр request также автоматически установит Content-Type в заголовок, если он не был установлен из словаря.

Функция обнаружения

Поддержка Fetch API может быть обнаружена путём проверки наличия Headers (en-US), Request , Response или fetch() (en-US) в области видимости Window или Worker . Для примера:

if (window.fetch)  // запустить мой fetch запрос здесь > else  // сделать что-то с XMLHttpRequest? > 

Смотрите также

• ServiceWorker API
• HTTP CORS
• HTTP
• Полифил Fetch
• Примеры работы с Fetch на GitHub

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

Работа с JSON

Обозначение объектов JavaScript (JSON — JavaScript Object Notation) — стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.

Необходимые знания:	Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS (see Introduction to objects (en-US) ).
Цель:	Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.

Нет, действительно, что такое JSON?

JSON — текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

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

Примечание: Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную*)*, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).

Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением .json и MIME type application/json .

Структура JSON

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

 "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [  "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] >,  "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] >,  "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] > ] > 

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes , мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

.homeTown; superHeroes["active"]; 

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

["members"][1]["powers"][2]; 

1. Сначала у нас есть имя переменной — superHeroes .
2. Внутри мы хотим получить доступ к свойству members , поэтому мы используем [‘members’] .
3. members содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1] .
4. Внутри этого объекта мы хотим получить доступ к свойству powers , поэтому мы используем [‘powers’] .
5. Внутри свойства powers находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем [2] .

Примечание: . Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

Массивы как JSON

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

[  "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] >,  "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] > ] 

Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например [0][«powers»][0] .

Другие примечания

• JSON — это чисто формат данных — он содержит только свойства, без методов.
• JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.
• Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде JSONLint.
• JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.
• В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.

Активное обучение: Работа с примером JSON

Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.

Начало работы

Для начала создайте локальные копии наших файлов heroes.html и style.css. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:

header>header> section>section> 

var header = document.querySelector("header"); var section = document.querySelector("section"); 

Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:

Получение JSON

Чтобы получить JSON, мы будем использовать API, называемый XMLHttpRequest (часто называемый XHR). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.

Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:

var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; 

var request = new XMLHttpRequest(); 

.open("GET", requestURL); 

• Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
• URL-адрес для запроса — это URL-адрес файла JSON, который мы сохранили ранее.

.responseType = "json"; request.send(); 

.onload = function ()  var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); >; 

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response ) в переменной superHeroes ; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций — первый из них заполнит правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в .

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload (en-US) ) — это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что request.response определённо будет доступен, когда мы начнём работу с ним.

Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:

function populateHeader(jsonObj)  var header = document.querySelector("header"); var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara.textContent = "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"]; header.appendChild(myPara); > 

Мы назвали параметр jsonObj , чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент (en-US) с createElement() , устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild() . Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown , так и formed свойства объекта.

Создание информационных карт героя

Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:

function showHeroes(jsonObj)  var section = document.querySelector("section"); var heroes = jsonObj["members"]; for (var i = 0; i  heroes.length; i++)  var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j  superPowers.length; j++)  var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); > myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); > > 

Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

1. Создаём несколько новых элементов: , , три

   и
   .

2. Устанавливаем , чтобы содержать name текущего героя.
3. Заполняем три абзаца своей secretIdentity , age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
4. Сохраняем свойство powers в другой новой переменной под названием superPowers — где содержится массив, в котором перечислены сверхспособности текущего героя.
5. Используем другой цикл for , чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент
6. , помещаем в него сверхспособности, а затем помещаем listItem внутри элемента
   ( myList ) с помощью appendChild() .
7. Последнее, что мы делаем, это добавляем ,

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

Примечание: . Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

Примечание: . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла superheroes.json на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье JavaScript objectbasics чтобы получить дополнительную информацию о нотации точек и скобок.

Преобразование между объектами и текстом

Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

.responseType = "json"; 

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

• parse() : принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript.
• stringify() : принимает объект, как параметр и возвращает эквивалентную строковую JSON строку.

Вы можете увидеть первый метод в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) — это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется parse() , чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:

.open("GET", requestURL); request.responseType = "text"; // now we're getting a string! request.send(); request.onload = function ()  var superHeroesText = request.response; // get the string from the response var superHeroes = JSON.parse(superHeroesText); // convert it to an object populateHeader(superHeroes); showHeroes(superHeroes); >; 

Как вы могли догадаться, stringify() работает обратным образом. Попробуйте ввести следующие строки в консоль JavaScript браузера один за другим, чтобы увидеть его в действии:

var myJSON =  name: "Chris", age: "38" >; myJSON; var myString = JSON.stringify(myJSON); myString; 

Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя stringify() , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.

Резюме

В этой статье мы предоставили вам простое руководство по использованию JSON в ваших программах, в том числе о том, как создавать и анализировать JSON, и как получить доступ к данным, заблокированным внутри него. В следующей статье мы рассмотрим объектно-ориентированный JavaScript.

Смотрите также

• JSON object reference page
• XMLHttpRequest object reference page
• Using XMLHttpRequest
• HTTP request methods
• Official JSON web site with link to ECMA standard

• Назад
• Обзор: Objects
• Далее

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.