</> Praktum

Главная / JavaScript / JSON в JavaScript

JavaScript · справочник

JSON в JavaScript

JSON — текстовый формат обмена данными. В JavaScript объект превращается в JSON-строку через JSON.stringify(), а строка восстанавливается через JSON.parse().

Сериализация

Функции, undefined и Symbol не представляются обычным JSON. Date превращается в строку, а циклическая ссылка вызывает ошибку.

const user = { name: 'Маша', active: true };
const json = JSON.stringify(user);
// {"name":"Маша","active":true}

Разбор и ошибки

JSON.parse требует корректные двойные кавычки и формат. Внешние или сохранённые данные разбирай внутри try...catch.

try {
  const data = JSON.parse(savedText);
  console.log(data.name);
} catch (error) {
  console.error('Повреждённый JSON', error);
}

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

JSON — это текст, не объект

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

В JSON нельзя передать функцию, undefined и комментарий. Дата превращается в строку. Если разобрать её обратно, получится строка, а не объект Date, пока ты сам её не преобразуешь.

const lesson = { title: "JSON", minutes: 15, draft: false };
const saved = JSON.stringify(lesson);
const restored = JSON.parse(saved);

if (restored.minutes < 1) {
  throw new Error("У урока странная длительность");
}

Ошибочный текст нужно поймать

Лишняя запятая, одинарные кавычки или обрезанный ответ сервера роняют JSON.parse. Оборачивай разбор в try/catch, если строка пришла откуда-то снаружи: из поля, из файла, из localStorage. Для собственного объекта, который ты только что сам собрал, падать там почти нечему.

После разбора проверь форму данных. То, что строка разобралась, не значит, что внутри есть title и что minutes — число. Одна проверка на обязательные поля спасает от странной отрисовки.

Как читать чужой JSON

Запомни: Храни в JSON данные, а не куски HTML. Разметку собирай кодом из полей.

Практика

Преобразуй объект настроек в форматированную JSON-строку с отступом 2, сохрани её и безопасно восстанови.

Связанные темы

localStorage · try...catch · Объекты

Ещё в разделе JavaScript