JS об'єкт JSON


Об'єкт JSON у JavaScript

Об'єкт JSON у JavaScript надає простий інтерфейс для перетворення даних між текстовим форматом JSON та об'єктами/значеннями JavaScript. Основні методи цього об'єкта це JSON.stringify() та JSON.parse().

JSON.stringify(): цей метод приймає об'єкт JavaScript та перетворює його в рядок JSON. Це дуже корисно, коли потрібно відправити об'єкт JavaScript на сервер або зберегти його у файлі.

Приклад:

const person = {
  name: "Anna",
  age: 25
};
const jsonString = `JSON.stringify`(person);
console.log(jsonString);  // "{"name":"Anna","age":25}"

JSON.parse(): цей метод виконує протилежну операцію — він перетворює рядок JSON назад в об'єкт JavaScript.

Приклад:

const jsonString = '{"name":"Anna","age":25}';
const person = `JSON.parse`(jsonString);
console.log(person.name);  // "Anna"

Однією з особливостей роботи з JSON в JavaScript є те, що не всі об'єкти JavaScript можуть бути безпосередньо перетворені в JSON. Наприклад, функції, undefined, а також специфічні об'єкти, такі як Date, будуть або відкинуті, або змінені під час процесу серіалізації.

автор: Bond

Формат JSON

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

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

Основний синтаксис включає два типи структур:

  • Масиви: упорядкований набір значень. У JSON вони виглядають так: [1, 2, 3].
  • Об'єкти: неупорядкований набір ключ-значення. У JSON це виглядає так: {"name": "John", "age": 30}.

Додатково, JSON підтримує такі примітивні типи: рядки, числа, булеві значення (true або false) і null.

Приклад:

const person = {
  "name": "Anna",
  "age": 25,
  "isStudent": true,
  "courses": ["Math", "History"]
};
автор: Bond

Порада

Якщо вам потрібно вивести рядок JSON так, щоб він був зрозумілим для людини, використовуйте третій аргумент у JSON.stringify(). Наприклад, JSON.stringify(yourObject, null, 4) додасть відступ у чотири пробіли для кожного рівня вкладеності.

автор: Bond
Порада

Будьте обережні при розборі рядків JSON, отриманих з ненадійних джерел. Некоректний рядок JSON може викликати помилки. Використовуйте блок try...catch, щоб обробляти можливі винятки при розборі даних.

автор: Bond
Нотатка

Пам'ятайте, що JSON підтримує лише примітивні типи даних: рядки, числа, булеві значення (true та false) та null. Також є підтримка об'єктів і масивів. Якщо ви спробуєте конвертувати значення undefined або функцію в JSON, це може призвести до неочікуваних результатів.

автор: Bond
Нотатка

Якщо у вас є дуже великий або глибоко вкладений об'єкт, це може призвести до проблем з продуктивністю при використанні JSON.stringify() або JSON.parse(). Пам'ятайте про це та, при можливості, намагайтеся уникати занадто складних структур даних.

автор: Bond

методи

Метод Опис
parse Перетворює рядок у форматі JSON на об'єкт JavaScript.
stringify Перетворює об'єкт або значення JavaScript у рядок JSON.

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE
3 3.5 4 10.5 12
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
37 18 4 4
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми працюємо з форматом JSON у JavaScript. По-перше, ми створюємо рядок myJSON, який містить інформацію про користувача у форматі JSON. Далі ми використовуємо метод JSON.parse() для того, щоб конвертувати цей рядок у об'єкт JavaScript, який ми зберігаємо в змінну myObj. На останньому кроці ми отримуємо значення властивості "name" з нашого об'єкта та зберігаємо його в змінну x. Тож, після виконання коду змінна x буде містити значення "John".

// Створення рядка JSON з даними про користувача
const myJSON = '{"name":"John", "age":30, "car":null}';

// Розбір рядка JSON та конвертація його в об'єкт JavaScript
const myObj = JSON.parse(myJSON);

// Отримання значення властивості "name" з об'єкта
x = myObj.name;
автор: Bond

У цьому прикладі ми дізнаємося, як обробляти дані у форматі JSON та працювати з об'єктами у JavaScript.

По-перше, ми маємо рядок myJSON, який представляє собою інформацію про користувача у форматі JSON. Щоб використовувати ці дані як об'єкт у JavaScript, ми використовуємо метод JSON.parse() і зберігаємо результат в змінну myObj.

Потім ми створюємо порожній рядок text і за допомогою циклу for...in проходимося по всім властивостям об'єкта myObj. Кожна властивість додається до рядка text з комою та пробілом на кінці. Таким чином, після виконання циклу, рядок text буде містити назви всіх властивостей об'єкта, розділені комами, наприклад: "name, age, car, ".

// Створення рядка JSON з даними про користувача
const myJSON = '{"name":"John", "age":30, "car":null}';

// Розбір рядка JSON та конвертація його в об'єкт JavaScript
const myObj = JSON.parse(myJSON);

// Ітерація через всі властивості об'єкта та їх додавання до рядка
let text = "";
for (const x in myObj) {
  text += x + ", ";
}
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід