JSON.parse и JSON.stringify: преобразование данных

Что такое JSON и зачем он нужен? 🧐

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

Пример JSON:

{
  "name": "Danila Bezhin",
  "age": 30,
  "skills": ["JavaScript", "Teaching", "Making memes"]
}

Но есть проблема: при передаче данных по сети мы получаем обычную строку! Как превратить её обратно в удобный объект? Вот тут на сцену выходят наши герои — JSON.parse и JSON.stringify.

JSON.parse: из строки в объект 🔄

Метод JSON.parse() преобразует строку в формате JSON в JavaScript-объект.

const jsonString = '{"name":"Alice","age":25,"isStudent":true}';
const parsedObject = JSON.parse(jsonString);

console.log(parsedObject.age); // 25
console.log(typeof parsedObject); // "object"

Важные моменты при парсинге:

• JSON-строка должна быть валидной (двойные кавычки, корректные запятые)
• Даты и функции не поддерживаются в JSON
• Можно парсить массивы: JSON.parse('[1, 2, 3]') → [1, 2, 3]

💡 Профессиональный совет: всегда обрабатывайте ошибки при парсинге с помощью try/catch, потому что невалидный JSON вызовет исключение!

try {
  const badJson = '{name: "Bob"}'; // Ошибка: нет кавычек у name
  const parsed = JSON.parse(badJson);
} catch (error) {
  console.error('Ошибка парсинга:', error.message);
}

JSON.stringify: из объекта в строку 📜

Обратный процесс — превращение JavaScript-объекта в JSON-строку — выполняется методом JSON.stringify().

const user = {
  name: "Bob",
  age: 35,
  hobbies: ["fishing", "coding"]
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Bob","age":35,"hobbies":["fishing","coding"]}'

Особенности stringify:

• Функции и undefined пропускаются
• Преобразует даты в строки (ISO-формат)
• Можно управлять процессом с помощью параметров

const obj = {
  date: new Date(),
  func: function() {}, // будет пропущена!
  undef: undefined     // тоже пропущено
};

console.log(JSON.stringify(obj)); // {"date":"2023-05-15T12:00:00.000Z"}

Продвинутые возможности 🧙‍♂️

Форматирование вывода

Третий параметр JSON.stringify() — это отступ для красивого форматирования:

const data = {a: 1, b: {c: 2}};
console.log(JSON.stringify(data, null, 2));
/*
{
  "a": 1,
  "b": {
    "c": 2
  }
}
*/

Преобразование при парсинге (reviver)

Второй параметр JSON.parse() — функция, которая может преобразовывать значения:

const json = '{"name":"Alice","birthDate":"1995-12-14"}';
const obj = JSON.parse(json, (key, value) => {
  if (key === 'birthDate') return new Date(value);
  return value;
});

console.log(obj.birthDate.getFullYear()); // 1995

Где это применяется на практике? 🌍

1. Общение с сервером (AJAX, Fetch API)
2. Локальное хранилище (localStorage/sessionStorage)
3. Конфигурационные файлы
4. Межпроцессное взаимодействие
5. Логирование сложных объектов

Пример работы с localStorage:

// Сохраняем
const settings = {theme: 'dark', notifications: true};
localStorage.setItem('appSettings', JSON.stringify(settings));

// Загружаем
const loaded = JSON.parse(localStorage.getItem('appSettings'));
console.log(loaded.theme); // "dark"

Частые ошибки и как их избежать ⚠️

1. Циклические ссылки — JSON.stringify() на них упадёт:

const a = {name: "A"};
const b = {ref: a};
a.ref = b; // Циклическая ссылка!
JSON.stringify(a); // TypeError: Converting circular structure to JSON

2. Потеря методов — при сериализации методы объекта теряются:

const person = {
  name: "Alice",
  greet() { console.log(`Hello, ${this.name}!`); }
};
const serialized = JSON.stringify(person); // {"name":"Alice"}

3. Несовместимые типы — BigInt, Map, Set не поддерживаются.

🔧 Решение: используйте кастомные функции преобразования или библиотеки вроде flatted для сложных случаев.

Тесты для самопроверки 🧪

1. Что выведет этот код?

const data = JSON.parse('{"x":1, "y":undefined}');
console.log(data.y);

2. Как правильно сохранить объект с датой в localStorage?

const event = {
  title: "Meetup",
  date: new Date('2023-12-31')
};
// Ваш код здесь

3. Как преобразовать JSON-строку, содержащую массив, обратно в массив?

Ответы:

1. undefined (но не потому что мы передали undefined, а потому что его нет в результате парсинга)
2. localStorage.setItem('event', JSON.stringify(event));
3. const arr = JSON.parse('[1,2,3]');