JSON (parse, stringify)

Урок: JSON (parse, stringify)

Введение

Представь, что фронтенд и сервер должны «разговаривать» друг с другом. Например, пользователь открывает страницу, и сайт загружает список товаров с сервера. Или отправляет форму с данными.

Но возникает вопрос: в каком виде передавать данные?

JavaScript работает с объектами, но серверу нужно получить данные в текстовом формате. И наоборот — сервер отправляет данные как текст, а нам нужно превратить их обратно в объекты.

Для этого используется JSON.

JSON — это формат, который позволяет удобно передавать структурированные данные в виде строки. И в JavaScript есть два ключевых инструмента для работы с ним:

JSON.stringify — превращает объект в строку;
JSON.parse — превращает строку обратно в объект.

Что такое JSON на практике

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

Пример JSON:

{
  "name": "Stepan",
  "age": 25
}

На первый взгляд это почти обычный объект. Но есть важное отличие: это строка, а не JavaScript-объект.

В JavaScript аналогичный объект выглядел бы так:

let user = {
  name: 'Stepan',
  age: 25,
};

Разница в том, что JSON используется для передачи данных, а объект — для работы с ними в коде.

Преобразование объекта в JSON — stringify

Метод JSON.stringify превращает объект в строку.

let user = {
  name: 'Stepan',
  age: 25,
};

let json = JSON.stringify(user);

console.log(json);

Результат:

{"name":"Stepan","age":25}

Разберём:

мы берём объект user;
вызываем JSON.stringify;
получаем строку в формате JSON.

Теперь эту строку можно:

отправить на сервер;
сохранить в файл;
записать в localStorage.

Важно: результат — это строка, а не объект.

Обратное преобразование — parse

Метод JSON.parse делает обратное: превращает JSON-строку в объект.

let json = '{"name":"Stepan","age":25}';

let user = JSON.parse(json);

console.log(user.name);

Результат:

Stepan

Здесь:

json — это строка;
JSON.parse преобразует её в объект;
после этого можно работать как с обычным объектом.

Это очень важно при работе с API, потому что данные почти всегда приходят в формате JSON.

Важные правила JSON

Хотя JSON похож на объект, у него есть строгие правила.

Например:

{
  "name": "Stepan"
}

Здесь ключи обязательно в двойных кавычках.

В JavaScript можно писать так:

let user = { name: 'Stepan' };

Но в JSON так нельзя.

Также JSON не поддерживает:

функции;
undefined;
комментарии.

Например:

let user = {
  name: 'Stepan',
  sayHi: function () {},
};

console.log(JSON.stringify(user));

Функция в объекте при JSON.stringify не попадает в строку — свойство с функцией опускается.

Работа с массивами

JSON отлично работает с массивами.

let users = [{ name: 'Stepan' }, { name: 'Ivan' }];

let json = JSON.stringify(users);

console.log(json);

Результат:

[{"name":"Stepan"},{"name":"Ivan"}]

А теперь обратно (в отдельном запуске строка JSON задаётся заново):

let json = '[{"name":"Stepan"},{"name":"Ivan"}]';

let parsed = JSON.parse(json);

console.log(parsed[0].name);

Результат:

Stepan

Таким образом можно передавать сложные структуры данных.

Где это используется на практике

JSON используется практически везде.

Когда ты:

получаешь данные с сервера;
отправляешь данные через API;
сохраняешь данные в localStorage;
работаешь с конфигурациями;

— почти всегда используется JSON.

Например:

сервер отправляет JSON → ты делаешь JSON.parse;
ты отправляешь данные → используешь JSON.stringify.

Это стандарт обмена данными в вебе.

Частые ошибки

Одна из частых ошибок — забыть, что JSON — это строка.

let json = '{"name":"Stepan"}';

console.log(json.name);

Это не сработает, потому что это строка.

Нужно сначала распарсить строку:

let json = '{"name":"Stepan"}';
let user = JSON.parse(json);

console.log(user.name);

И только потом работать с полями как с обычным объектом.

Итоговое понимание

JSON — это формат, который позволяет передавать данные между системами в виде строки.

JSON.stringify превращает объект в строку, JSON.parse делает обратное — превращает строку в объект.

Ключевая идея в том, что JSON — это мост между миром JavaScript и внешними системами.

Если объект — это способ работать с данными внутри программы, то JSON — это способ передавать эти данные наружу и получать их обратно.