Що таке JSON

Якщо ви тестуєте API, то повинні знати про два основні формати передачі даних:

• XML - використовується в SOAP (Завжди) та REST-запитах (рідше);
• JSON - використовується в REST-запитах.

Сьогодні я розповім вам про JSON. І розповім в основному з погляду «надіслати запит у Postman або прочитати відповідь», тому що стаття розрахована на студентів, які вперше працюють із Postman.

JSON (англ. JavaScript Object Notation) - текстовий формат обміну даними, заснований на JavaScript. Але при цьому формат незалежний від JS може використовуватися в будь-якій мові програмування.

JSON використовується в REST API. Принаймні тестувальник швидше за все зіткнеться з ним саме там.

Див також:

Що таке API - спільне знайомство з API

Що таке XML – другий популярний формат

Введення в SOAP та REST: що це і з чим їдять — відео про різницю між SOAP та REST

У SOAP API можливий лише формат XML, а ось REST API підтримує як XML, так і JSON. Розробники віддають перевагу JSON - Він легше читається людиною і менше важить. Тож давайте розберемося, як він виглядає, як його читати і як ламати!

Як влаштований JSON

Як значення в JSON можуть бути використані:

• JSON-об'єкт
• Масив
• Число (ціле або речове)
• Літерали true (логічне значення «істина»), false (логічне значення «брехня») та null
• Рядок

Я думаю, з простими значеннями питань не виникне, тож розберемо масиви та об'єкти. Адже якщо говорити про REST API, то зазвичай ви відправлятимете/отримуватимете саме json-об'єкти.

JSON-об'єкт

Як влаштований

І розберемося, що означає цей запис.

Об'єкт поміщений у фігурні дужки <>

JSON-об'єкт - це невпорядкована безліч пар «ключ: значення».

Ключ - це назва параметра, який ми надаємо серверу. Він служить маркером для системи, що приймає запит: «дивися, тут у мене значення такого-то параметра!». А інакше як система зрозуміє де що? Їй потрібна підказка!

Ось, наприклад, Віктор Іван — це що? Шукаємо опис параметра «query» у документації - ага, та це ж запит для підказок!

Це ніби ми вбили рядок «Віктор Іван» у GUI (графічному інтерфейсі користувача):

Коли користувач починає вводити дані у форму, то відразу бачить результат - з'являється список підказок. Це означає, що розробник прописав у коді умову — робити певну дію на кожне введення символу у полі. Яка дія? Можна побачити через f12.

Відкриваємо вкладку Network, вбиваємо «Віктор Іван» та знаходимо запит, який при цьому йде на сервер. Ого, та це той самий приклад, що ми розуміємо!

Клієнт передає серверу запит у форматі JSON. Усередині два параметри, дві пари «ключ-значення»:

• query — рядок, яким шукаємо (те, що користувач вбив у GUI);
• count - кількість підказок у відповіді (у Дадаті цей параметр зашитий у форму, завжди повертається 7 підказок. Але якщо смикати підказки безпосередньо, значення можна змінювати!)

Пари «ключ-значення» розділені комами:

Рядки беремо в лапки, числа немає:

Звичайно, всередині може бути не лише рядок чи число. Це може бути інший об'єкт! Або масив. Або об'єкт у масиві, масив у об'єкті. Будь-яка кількість рівнів вкладеності =))

Об'єкт, масив, число, булеве значення (true/false) — якщо у нас не рядок, лапки не потрібні. Але в будь-якому випадку це буде значення якогось ключа:

Перенесення рядків робити необов'язково. Взагалі прогалини та перенесення рядків потрібні тільки людині для читабельності, система зрозуміє і без них:

Так правильно

Так теж правильно

Ключ - ЗАВЖДИ рядок, але ми все одно беремо його в лапки. У JavaScript цього можна не робити, у JSON не можна.

Так правильно

Так правильно в JS, але неправильно в JSON

Принаймні, якщо ви працюєте з простими значеннями ключів, а кілька слів записуєте у верблюжому реєстрі або в зміїному регістрі. Якщо ви хочете написати в ключі кілька слів через пробіл, ключ потрібно взяти в лапки.

my query: "Віктор Іван"

"my query": "Віктор Іван"

І все ж таки я рекомендую використовувати прості назви ключів, або використовувати snake_case.

Писати ключі можна у будь-якому порядку. Адже JSON-об'єкт – це невпорядковане безліч пар «ключ: значення».

Так правильно

Так теж правильно

Дуже важливо це розуміти і тестувати! Система, яка приймає запит, повинна орієнтувати на назву ключів у запиті, а не на порядок їх прямування. Ключове слово «повинна»)) Хоча знаю приклади, коли від перестановки ключів місцями все ламалося, адже «першим має йти запит, а не count!».

Ключ чи властивість?

Ось у нас є JSON-об'єкт:

Що таке «query»? Якщо я хочу звернутися до нього, як мені це сказати? Є 2 варіанти, і обидва правильні:

- Звернутися до якості об'єкта;

— Отримати значення за ключом.

Тобто «query» можна назвати як ключем, і властивістю. А як правильно?

Правильно і так, і так! Просто є різні визначення об'єкта:

Об'єкт

У JS об'єкт – це саме об'єкт. У якого є набір властивостей та методів:

• Властивості описують, ЩО ми створюємо.
• Методи - що об'єкт вміє РОБИТИ.

Тобто якщо ми хочемо створити машину, є два шляхи:

1. Перелічити 10 різних змінних - модель, номер, колір, пробіг.
2. Створити один об'єкт, де всі ці властивості.

Аналогічно з кішечкою, собачкою, другом із записника.

Об'єктно-орієнтоване програмування (ООП) пропонує мислити не набором змінних, а об'єктом. Хоча б тому, що це логічніше. Змінних у коді буде багато, як зрозуміти які з них взаємопов'язані?

Ось якщо я створюю машину, скільки змінних мені треба заповнити? А якщо змінюю дані? А якщо вилучаю? Коли змінні розкидані за кодом, можна забути якусь і отримати помилку в інтерфейсі. А якщо у нас є цілісний об'єкт, завжди можна подивитися, які у нього є властивості та методи.

Наприклад, створимо кішечку:

• Властивості name, year (що це за кішечка)
• Функції sleep (що вона вміє робити, опис поведінки)

За кодом відразу видно, що кішечка має ім'я і вік, вона вміє спати. Якщо розробник вирішить додати нові властивості або методи, він доповнить цей об'єкт і знову все в одному місці.

Якщо потім потрібно буде отримати інформацію про кішечку, розробник зробить REST-метод getByID, searchKitty, або якийсь інший. А в ньому повертатиме властивості об'єкта.

Тобто метод поверне

І з використанням імені цілком доречно говорити «звернутися до якості об'єкта». Адже це об'єкт (кішечка), і його властивості!

Набір пар «ключ: значення»

Друге визначення об'єкта - невпорядкована безліч пар ключ: значення, укладене у фігурні дужки <>.

Воно застосовується тоді, коли всередині фігурних дужок приходить не конкретний цілісний об'єкт, а набір полів. Вони можуть бути пов'язані між собою, а можуть відноситься до абсолютно різних об'єктів усередині коду:

• client_fio (у коді це властивість fio об'єкта client)
• kitty_name (у коді це властивість name об'єкта cat)
• car_model (у коді це властивість model об'єкта car)
• …

У такому разі логічно називати ці параметри саме ключами ми хочемо отримати значення по ключу.

Але в будь-якому випадку, і «ключ», і «властивість» буде правильним. Не лякайтеся, якщо в одній книзі/статті/відео побачили одне, в іншій інше. Це просто різні трактування.

Json-об'єкт - це невпорядкована безліч пар "ключ: значення", укладене у фігурні дужки "<>". Ключ описується рядком, між ним та значенням стоїть символ «:». Пари ключ-значення відокремлюються один від одного комами.

Значення ключа можуть бути будь-якими:

І лише рядок ми беремо в лапки!

JSON-масив

Як влаштований

Давайте знову почнемо з прикладу. Це масив:

Масив укладений у квадратні дужки.

Усередині квадратних дужок йде набір значень. Тут немає ключів, як у об'єкті, тому звертатися до масиву можна лише за номером елемента. І тому у разі масиву міняти місцями дані усередині не можна. Це впорядковане безліч значень.

Значення розділені комами:

Значення всередині

Усередині масиву може бути все, що завгодно:

Рядки

Об'єкти

Так, а чому б і ні:

[1, , "Такий ось масивчик"]

Або навіть щось складніше. Ось приклад відповіді підказок із Дадати:

Система повертає масив підказок. Скільки запитали у параметрі count, стільки і здобули. Кожна підказка – об'єкт, у якому ще один об'єкт. І це далеко не найскладніша структура! Рівень вкладеності може бути скільки завгодно - масив в масиві, який всередині об'єкта, який всередині масиву, який всередині об'єкта.

Ну і, звісно, ​​можна і навпаки, передати масив в об'єкті. Ось приклад запиту до підказок:

Це об'єкт (оскільки у фігурних дужках і всередині набір пар «ключ: значення»). А значення ключа "parts" - Це масив елементів!

Масив - це просто набір значень, розділених комами. Знаходиться усередині квадратних дужок [].

А от усередині нього може бути все, що завгодно:

• числа
• рядки
• інші масиви
• об'єкти
• суміш із усього вищеназваного

JSON vs XML

У SOAP можна застосовувати тільки XML там без варіантів.

У REST можна використовувати як XML, і JSON. Розробники віддають перевагу json-формату, тому що він простіше сприймається і менше важить. У XML є зайва обв'язка, назва полів повторюється двічі (що відкриває та закриває тег).

Порівняйте один і той же запит на оновлення даних у картці користувача:

Іванов
Іван
Іванович
01.01.1990
Москва
8 926 766 48 48

За рахунок того, що ми не дублюємо назву поля щоразу "surname - surname"читати JSON простіше. І за рахунок цього ж запит менше важить, що за поганого інтернету буває важливо. Або за великого навантаження.

Well Formed JSON

Розробник сам вирішує, який JSON вважатиметься правильним, а який ні. Але є загальні правила, які не можна порушувати. Наш JSON має бути well formed, Тобто синтаксично коректний.

Щоб перевірити JSON на синтаксис, можна використовувати будь-який JSON Validator (так і гугліть). Я рекомендую веб-сайт w3schools. Там є сам валідатор + опис типових помилок із прикладами.

Але врахуйте, що парсери всередині коду працюють не за вікіпедією або w3schools, а за RFC, стандартом. Отже, якщо хочете вивчити «яким має бути JSON», то правильніше відкривати RFC і шукати там JSON Grammar. Однак простому тестувальнику вистачить набору типових правил з w3schools, їх і розберемо.

Правила well formed JSON:

1. Дані написані у вигляді пар «ключ: значення»
2. Дані розділені комами
3. Об'єкт знаходиться всередині фігурних дужок <>
4. Масив - усередині квадратних []

1. Дані написані у вигляді пар «ключ: значення»

У JSON назву ключа потрібно брати в лапки, JavaScript не обов'язково - він і так знає, що це рядок. Якщо ми тестуємо API, то там буде саме JSON, тому лапки зазвичай потрібні.

Але врахуйте, що це стосується JSON-об'єкта. Тому що json може бути числом і рядком. Тобто:

Це теж коректний json, хоч і не у вигляді пар «ключ: значення».

І от якщо у вас по ТЗ саме json-об'єкт на вході, спробуйте його зламати, не передавши ключа. Ще можна не передати значення, але це не зовсім негативний тест – система може сприймати це нормально, як порожнє введення.

2. Дані розділені комами

Пари «ключ: значення» в об'єкті розділяються комами. Після останньої пари кома не потрібна!

Типова помилка: поставили кому в кінці об'єкта:

Це наслідки копіпасти. Взяли приклад із документації, підставили в постман (ну або розробник API підставив код, який буде викликати систему), а потім вирішили поміняти поля місцями.

Дивимося на запит - ну, query то важливіше ніж count, Треба поміняти їх місцями! Копіпастимо весь рядок «"count": 7,», вставляємо нижче. Перед нею кому додаємо, а «зайву» прибрати забуваємо. Принаймні у мене це часта помилка, коли я «кручу-верчу, місцями поміняти хочу».

Інший приклад – коли ми додаємо у запит нове поле. Зразковий сценарій:

1. У мене вже є працюючий запит у Postman-і. Але у ньому мінімум полів.
2. Я його клоную
3. Копіюю з документації потрібне мені поле.Воно в прикладі не останнє, тому йде з комою на кінці.
4. Вставляю собі в кінці запиту - в поточний кінець додаю кому, потім вставляю новий рядок.
5. Надсилаю запит - ой, помилка! З копіпасти щось кому не прибрала!

Я на цей сценарій постійно напарююсь під час тестування перестановки полів. Адже це потрібно перевіряти! Хороший запит може бути як у математичній приказці: «від зміни місць доданків сума змінюється».

Не дарма ж визначення json-об'єкта свідчить, що «це невпорядковане безліч пар ключ: значення». Якщо невпорядковане — я можу передавати ключі в будь-якому порядку. І сервер повинен шукати на запит назву ключа, а не звертатися до індексу елемента.

Розробник, який взаємодіятиме з API, теж людина, яка може помилитися. І якщо система видаватиме незрозуміле повідомлення про помилку, можна довго думати, де саме ти налагоджував. Тому помилки також тестуємо.

Щоб протестувати, як система обробляє «поганий json», замініть кому на крапку з комою:

Або додайте зайву кому в кінці запиту - ця помилка зустрічатиметься частіше!

Або пропустіть кому там, де вона потрібна:

Аналогічно із масивом. Дані всередині поділяються через кому. Бажаєте спробувати зламати? Замініть кому на крапку з комою! Тоді система вважатиме, що у вас не 5 значень, а 1 велике:

*Я додала коментарі всередині блоку коду. Але врахуйте, що у JSON коментарів немає. Взагалі. Так що якщо ви запитуєте в Postman, не вдасться розставити коментарі у різних рядків в JSON-форматі.

3. Об'єкт знаходиться усередині фігурних дужок <>

Щоб зламати цю умову, заберіть одну фігурну дужку:

Або спробуйте передати об'єкт як масив:

Адже якщо система чекає від вас у запиті на об'єкт, то вона шукатиме фігурні дужки.

4. Масив - усередині квадратних []

Щоб зламати цю умову, заберіть одну квадратну дужку:

Або спробуйте передати масив як об'єкт, у фігурних дужках:

Адже якщо система чекає від вас у запиті масив, вона шукатиме квадратні дужки.

Разом

JSON (JavaScript Object Notation) - Текстовий формат обміну даними, заснований на JavaScript. Легко читається людиною та машиною. Часто використовується в API REST (частіше, ніж XML).

Коректні значення JSON:

• JSON-об'єкт — невпорядкована безліч пар «ключ: значення», що міститься у фігурних дужках «< >».
• Масив — упорядкований набір значень, розділених комами. Знаходиться усередині квадратних дужок [].
• Число (ціле або речове).
• Літерали true (логічне значення «істина»), false (логічне значення «брехня») та null.
• Рядок

При тестуванні REST API найчастіше ми працюватимемо саме з об'єктами, що у запиті, що у відповіді. Масиви теж будуть, але зазвичай усередині об'єктів.

Коментарів в JSON, на жаль, немає.

Правила well formed JSON:

1. Дані в об'єкті написані у вигляді пар «ключ: значення»
2. Дані в об'єкті або масиві розділені комами.
3. Об'єкт знаходиться всередині фігурних дужок <>
4. Масив - усередині квадратних []

Див також:

+коментарі до цієї статті =)

Що таке JSON у JavaScript?

JSON (JavaScript Object Notation) - це формат обміну даними, що легко читається, заснований на підмножині мови JavaScript. У JavaScript, об'єкти можна перетворити на JSON і навпаки. JSON часто використовується для передачі даних між клієнтом та сервером.

Основні моменти:

1. Формат даних:
   • JSON є текстовим форматом, що складається з пар ключ-значення, а також упорядкованих списків значень.
2. Структура даних:
   • JSON підтримує рядки, числа, логічні значення, масиви, об'єкти та значення null .
3. Перетворення на JavaScript:
   • Дані у форматі JSON можуть бути легко перетворені на об'єкти JavaScript за допомогою методу JSON.parse .
4. Перетворення на JSON:
   • Об'єкти JavaScript можуть бути перетворені на рядок JSON за допомогою методу JSON.stringify .

// Приклад об'єкта JavaScript let person = < name: "John Doe", age: 30, hobbies: ["Reading", "Gaming"] >; // Перетворення об'єкта в JSON-рядок let personJSON = JSON.stringify(person); console.log("JSON String:", personJSON); // Перетворення JSON-рядка в об'єкт let parsedPerson = JSON.parse(personJSON); console.log("Parsed Person Object:", parsedPerson);

Working with JSON

JavaScript Object Notation (JSON) є стандартним текстом, заснованим на форматі для відображення структурованих даних, що базуються на JavaScript об'єкті syntax. Це використовується, як правило, для обміну даними в веб-застосунках (e.g., повідомляючи деякі дані з сервера до клієнта, може бути може бути перенесена на веб-сторінці, або vice versa). Ви можете скористатися ним, щоб отримати, якщо в цьому матеріалі, ми робимо все, що потрібно для роботи з JSON, використовуючи JavaScript, including parsing JSON з тією ж можливістю, щоб отримати доступ до нього, а також створення JSON.

• What JSON is — це дуже простий спосіб використання data format based on JavaScript object syntax.
• Що JSON може бути contain arrays.
• Retrieve JSON як JavaScript object using mechanisms available in Web APIs (наприклад, Response.json() in the Fetch API).
• Access values ​​inside JSON data using bracket and dot syntax.
• Перевірка між об'єктами і текстом JSON.parse() and JSON.stringify() .

No, really, what is JSON?

JSON є текст-базований формат даних, що містить JavaScript об'єкт syntax, який був популярним за Douglas Crockford. Єдине, що це загрожують помилки JavaScript об'єкта літературної syntax, він може бути незалежним від JavaScript, і багато програмних навколишнього середовища характеризують здатність до read (parse) і generate JSON.

JSON exists as a string — useful when you want to transmit data across a network. Це потребує бути наведений на природний JavaScript об'єкт, коли ви хочете, щоб access the data. This is not a big issue — JavaScript виконує глобальний JSON object that has available methods for converting between the two.

Note: Перетворюючи string на природний об'єкт називається deserialization, while converting native object to a string so it can be transmitted across the network is called serialization.

A JSON string може бути зареєстрований в його власному файлі, який є basically just a text file with an extension of .json , and MIME type of application/json .

JSON structure

Як описано вище, JSON є string, який має формат дуже велику помилку JavaScript object literal format. Ви можете включати ті ж самі основні типи даних в JSON, як ви можете в стандартному JavaScript object — strings, numbers, arrays, booleans, and other object literals. Це дозволить вам збудувати data hierarchy, як ви:

Якщо loaded this string в JavaScript program і шифрується його в вариабель названий superHeroes для прикладу, ми повинні бути введені в цю функцію за допомогою самої кнопки/утиліти нотатки, що висвічується в JavaScript object basics article. For example:

superHeroes.homeTown; superHeroes["active"];

Для того, щоб access data further down the hierarchy, ви маєте на меті потрібні property names і array indexes together. Для прикладу, щоб скористатися трьома superpower of the second hero listed in the members list, you'd do this:

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

1. First, we have the variable name superHeroes .
2. У тому, щоб отримати доступ до members property, ми будемо використовувати ["members"] .
3. members contains an array populated by objects. Для того, щоб використовувати другий об'єкт всередині array, буде використовувати [1] .
4. У цьому об'єкті, ми намагаємося користуватися потужністю, так, щоб використовувати ["powers"] .
5. Всередині Powers property is array містить selected hero's superpowers. We want the third one, so we use [2] .

Note: We've made the JSON seen above available inside a variable in our JSONTest.html example (see the source code). Try loading this up and the accessing data inside the variable via your browser's JavaScript console.

Arrays as JSON

Above we mentioned that JSON text basically looks like a JavaScript object inside string.We can also convert arrays to/from JSON. The below example is perfectly valid JSON:

Ви маєте з'єднання array items (in its parsed version) за допомогою array index, для прикладу [0]["powers"][0] .

Інші notes

• JSON is purely a string with specified data format — it contains only properties, no methods.
• JSON requires double quotes для використання навколо strings and property names. Single quotes не є вірними іншим, якщо ви не бачите лінію JSON string.
• Єдино єдиний мізований кома або колона може призвести до файлу JSON, щоб йти, і не працювати. Ви повинні бути надійними до validate any data, і ви метеорієнтувати його (якщо комп'ютер-генерований JSON є неправильно включати в себе errors, як тривалий час, як генератор програм є працюючим). Ви можете validate JSON використовуючи application як JSONLint.
• JSON може фактично вибрати форму будь-якого типу даних, що є правильним для включення в JSON, не тільки arrays або об'єкти. Для того, щоб виявити, як один рядок або номер може бути дійсним JSON.
• Unlike в JavaScript code в яких об'єкті propertyes можуть бути unquoted, в JSON тільки quoted strings можуть бути використані як properties.

Active learning: Working through a JSON example

So, let's work through an example to show show how could make use of some JSON formatted data on a website.

Getting started

Для того, щоб зробити, робити місцеві копії наших heroes.html і style.css files. Останні позначки деяких простих CSS до типу нашої сторінки, при тому, що основні contains деякі простий текст HTML, а також елемент для розміщення JavaScript code буде бути підписаний в цьому режимі:

Будьте готові до load JSON в наш script, і використовуйте деякі ніфти DOM поводження, щоб зробити це, як це:

Top-level function

The top-level function looks like this:

async function populate() < const requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; const request = новий Request(requestURL); const response = await fetch (request); const superHeroes = await response.json(); populateHeader(superHeroes); populateHeroes(superHeroes); >

Для отримання JSON, ми використовуємо API називається Fetch. Цей API дозволяє використовувати мережеві запитання до відновлених ресурсів від сервера через JavaScript (e.g.

У наших функціях, перші чотири лінії використовує Fetch API для роботи JSON від сервера:

• we declare the requestURL variable to store the GitHub URL
• we use the URL to initialize a new Request object.
• we make the network request using the fetch() function, and this returns a Response object
• we retrieve the response as JSON використовуючи json() функцію Response object.

Note: The fetch() API is asynchronous. Ви можете дізнатися про асинхронні функції в detail в нашому асинхронному JavaScript module, але для цього, будь-який впевнений, що вам потрібно, щоб дізнатися, як слово, асинхронний до name of the function, що використовує функцію API, і з'явиться за допомогою ключа calls to any asynchronous функцій.

Після всього, що superHeroes variable буде складати JavaScript об'єкт, заснований на JSON. We are then passing that object to two function calls — the first one fills the with the data correct, while the second one creates an information card for each hero on the team, and inserts it into the .

Populating the header

Тепер, що ми скористалися JSON data і перевірили його в JavaScript об'єкта, що використовується для того, щоб записати дві функції, які я маю на увазі. Перший з усіх, вказуючи на наступну функцію визначення нижче, ніж попередній код:

function populateHeader(obj) < const header = document.querySelector("header"); const myH1 = document.createElement("h1"); myH1.textContent = obj.squadName; header.appendChild(myH1); const myPara = document.createElement("p"); myPara.textContent = `Hometown: $// Formed: $`; header.appendChild(myPara); >

Тут ми створили перший елемент h1 з createElement() , set its textContent to equal the squadName property of the object, then append it to the header using appendChild() . Ми маємо дуже подібну дію з пунктом: створіть його, налаштуйте його текст content and append it to the header. Лише difference є те, що його текст є набір до template literal containing both homeown and ford properties of the object.

Creating the hero information cards

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

function populateHeroes(obj) < const section = document.querySelector("section"); const heroes = obj.members; for (const hero of heroes) < const myArticle = document.createElement("article"); const myH2 = document.createElement("h2"); const myPara1 = document.createElement("p"); const myPara2 = document.createElement("p"); const myPara3 = document.createElement("p"); const myList = document.createElement("ul"); myH2.textContent = hero.name; myPara1.textContent = `Secret identity: $`; myPara2.textContent = `Age: $`; myPara3.textContent = "Superpowers:"; const superPowers = hero.powers; for (const power of superPowers) < const listItem = document.createElement("li"); listItem.textContent = power; myList.appendChild(listItem); >myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); > >

Натисніть, щоб перейти до членів власників property of JavaScript object in a new variable. Це array contains multiple objects that contain the information for each hero.

Next, we use a for. of loop to loop through each object in the array. For each one, we:

1. Create several new elements: an , an , three

   s, and a .

2. Натисніть на те, що поточний hero's name .
3. Fill three paragraphs with their secretidentity , age , and a line saying "Superpowers:" ввести інформацію в листі.
4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
5. Use another for. of loop to loop through the current hero's superpowers — for each one we create an
6. element, put the superpower inside it, then put the listItem inside the element ( myList ) using appendChild() .
7. The very last thing we do is to append the ,

   s, and inside the ( myArticle ), then append the inside the . Ордени, в яких things appended is important, as this is the order they will be displayed inside the HTML.

Note: Якщо ви маєте простий, щоб отримати приклад до роботи, намагайтеся відповісти на наші heroes-finished.html source code (see it running live also.)

Note: Якщо ви маєте неповноцінне доповнення доти / брикету notation буде використовувати для зйомки JavaScript об'єкт, це може допомогти вам в superheroes.json файлу оголошено в будь-який tab або ваш текст editor, і відповісти на те, що ви робите в нашому JavaScript.Ви повинні також refer back до нашого JavaScript об'єкта basic article for more information on dot and bracket notation.

Calling the top-level function

Зрештою, нам потрібна call наше top-level populate() function:

Converting between objects and text

Докладніше виявилося, що в термінах доступу до JavaScript об'єкта, тому що наведено мережу відповіді безпосередньо в JavaScript об'єкт, використовуючи response.json() .

Але ми будемо ходити по суті — деякі ми будемо отримувати Raw JSON string, і ми повинні бути перевірені на object ourselves. І коли ми хотіли, щоб JavaScript об'єкт надсилався до мережі, ми повинні навести це на JSON (на string) перед тим, щоб скористатися ним.Досить, ці дві проблеми є спільним у web development що будівля-в JSON об'єкта є наявною в браузерах, які містять наступні два методи:

• parse() : Accepts a string JSON as parameter, і returns the corresponding JavaScript object.
• stringify() : Accepts an object as a parametr, і відновити подібний JSON string.

Ви можете побачити першу одну в цій роботі в нашій герої-finished-json-parse.html example (see the source code) — це те, що exactly the same thing as the example we built up earlier, except that:

• we retrieve the response as text rather than JSON, by calling the text() method of the response
• we then use parse() to convert the text to JavaScript object.

Key snippet of code is here:

async function populate() < const requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; const request = новий Request(requestURL); const response = await fetch (request); const superHeroesText = await response.text(); const superHeroes = JSON.parse(superHeroesText); populateHeader(superHeroes); populateHeroes(superHeroes); >

Як вам велику мету, stringify() працює з можливим способом. Try введення наступних ліній в свій 브라우저 JavaScript насолоджуеться одним для того, щоб його в роботі:

let myObj = <name: "Chris", age: 38>; myObj; let myString = JSON.stringify(myObj); myString;

Тут ми створюємо JavaScript об'єкт, то вибираємо те, що його знаходять, то надсилає його на JSON string using stringify() — натискання на зміну значення в новому варіанті — на те, що checking it again.

Test your skills!

Чи ви покінчили з цим матеріалом, але може remember most важлива інформація? Ви можете скористатися кількома тестами для того, щоб дізнатися, що ви отримаєте цю інформацію до того, як ви збираєтеся — вірш Test your skills: JSON.

Summary

У цьому слові, ми встановили ви, використовуючи JSON в ваших програмах, включаючи те, що створюється і повторюється JSON, і як доступ до access data locked inside it.У наступному матеріалі, ми бачимо на практичних технологіях для debugging JavaScript і handling errors.

See also