Робота з JSON

JavaScriptJunior~1 хв читання

Ці дві функції - одні з найчастіше використовуваних у JavaScript. Вони потрібні для перетворення даних у формат JSON і назад.

Що таке JSON

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

Приклад JSON-рядка:

javascript

{
  "name": "Oleh",
  "age": 25,
  "isAdmin": false
}

1. `JSON.stringify()` - об'єкт → рядок

Перетворює об'єкт JavaScript у рядок формату JSON.

Приклад:

javascript

const user = {
  name: 'Oleh',
  age: 25,
  isAdmin: false
};

const json = JSON.stringify(user);

console.log(json);
// '{"name":"Oleh","age":25,"isAdmin":false}'
console.log(typeof json); // "string"

Тепер json - це звичайний рядок, який можна надіслати мережею або зберегти у файл.

Що робить `JSON.stringify()`:

перетворює об'єкт або масив у рядок;
ігнорує функції, undefined і символи (Symbol);
рекурсивно обходить вкладені об'єкти.

Приклад з функціями

javascript

const data = {
  name: 'JS',
  greet() { console.log('Hi'); },
  test: undefined
};

console.log(JSON.stringify(data));
// '{"name":"JS"}' - функції та undefined не потрапляють у JSON

Можна красиво відформатувати (з відступами)

javascript

const json = JSON.stringify(user, null, 2);
console.log(json);
/*
{
  "name": "Oleh",
  "age": 25,
  "isAdmin": false
}
*/

Другий аргумент - replacer, третій - кількість пробілів для форматування.

2. `JSON.parse()` - рядок → об'єкт

Перетворює JSON-рядок назад у об'єкт JavaScript.

Приклад:

javascript

const json = '{"name":"Oleh","age":25,"isAdmin":false}';

const user = JSON.parse(json);

console.log(user.name); // "Oleh"
console.log(user.age);  // 25
console.log(typeof user); // "object"

Помилка при некоректному JSON

Якщо рядок некоректний, буде помилка:

javascript

JSON.parse("{name:'Oleh'}"); // Помилка: Unexpected token n

Правильний варіант:

javascript

JSON.parse('{"name":"Oleh"}');

У JSON ключі та рядки завжди повинні бути в подвійних лапках " ".

Приклад «у зв'язці»

Часто їх використовують разом, для копіювання або збереження даних:

javascript

const user = { name: 'Oleh', skills: ['JS', 'React'] };

const json = JSON.stringify(user);
localStorage.setItem('user', json); // зберегли рядок

const fromStorage = JSON.parse(localStorage.getItem('user'));
console.log(fromStorage.skills); // ['JS', 'React']

Приклад глибокого копіювання об'єкта

javascript

const obj = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(obj));

copy.b.c = 999;

console.log(obj.b.c); // 2 (оригінал не змінився)

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

Підсумок

Метод	Напрямок	Що робить	Результат
`JSON.stringify()`	об'єкт → рядок	перетворює об'єкт JS у JSON-текст	`'{"name":"Oleh"}'`
`JSON.parse()`	рядок → об'єкт	перетворює JSON-текст у об'єкт JS	`{ name: "Oleh" }`

Коротко

javascript

const user = { name: 'Oleh' };

const json = JSON.stringify(user); // '{"name":"Oleh"}'
const obj  = JSON.parse(json);     // { name: 'Oleh' }

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.