JSON: парсинг и сериализация данных

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

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

Почему JSON так популярен?

• Читаемость: Похож на обычный JavaScript-объект
• Компактность: Меньше лишних символов по сравнению с XML
• Универсальность: Поддерживается всеми языками программирования

// Пример JSON-объекта
{
  "name": "Алексей",
  "age": 30,
  "skills": ["JavaScript", "React", "Node.js"],
  "isDeveloper": true
}

Превращаем JSON в объект и обратно 🔄

JSON.parse() — читаем данные

Когда вы получаете JSON-строку (например, из API), её нужно преобразовать в JavaScript-объект:

const jsonString = '{"name":"Мария","age":25}';
const user = JSON.parse(jsonString);

console.log(user.name); // "Мария"
console.log(user.age);  // 25

💡 Если JSON невалиден, JSON.parse() выбросит ошибку SyntaxError. Всегда используйте try-catch при работе с ненадёжными данными!

JSON.stringify() — отправляем данные

Когда нужно отправить объект на сервер или сохранить в localStorage:

const user = {
  name: "Иван",
  preferences: {
    theme: "dark",
    fontSize: 14
  }
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Иван","preferences":{"theme":"dark","fontSize":14}}'

Продвинутые возможности 🔥

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

Добавляем отступы для читаемости:

const data = {a: 1, b: 2};
const prettyJson = JSON.stringify(data, null, 2);

/*
Получаем:
{
  "a": 1,
  "b": 2
}
*/

Фильтрация свойств

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

const user = {
  id: 123,
  name: "Данила",
  password: "supersecret"
};

// Только указанные свойства
const safeUser = JSON.stringify(user, ['id', 'name']);
console.log(safeUser); // '{"id":123,"name":"Данила"}'

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

JSON.parse() также поддерживает функцию-преобразователь:

const json = '{"date":"2023-01-01"}';
const obj = JSON.parse(json, (key, value) => {
  if (key === 'date') return new Date(value);
  return value;
});

console.log(obj.date instanceof Date); // true

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

1. Невалидный JSON
Пропущенные кавычки, лишние запятые — используйте валидаторы (например, в VS Code или онлайн).

2. Циклические ссылки
JSON.stringify() не может обработать объект с циклическими ссылками:

const a = { name: "A" };
const b = { name: "B", partner: a };
a.partner = b; // Циклическая ссылка

JSON.stringify(a); // TypeError: Converting circular structure to JSON

3. Потеря методов
JSON содержит только данные, методы объектов не сохраняются:

const obj = {
  name: "Тест",
  greet() { console.log("Привет!"); }
};

const json = JSON.stringify(obj); // {"name":"Тест"}

Практическое применение 🛠️

Работа с localStorage

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

// Загружаем
const saved = JSON.parse(localStorage.getItem('appSettings'));
console.log(saved.darkMode); // true

Обмен данными с сервером

// Отправка данных
fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Анна' })
});

// Получение ответа
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

Проверь себя: мини-викторина ❓

1. Как преобразовать объект {x:1} в JSON-строку?
2. Что выведет typeof JSON.parse('{"a":1}')?
3. Как избежать ошибок при парсинге невалидного JSON?
4. Почему JSON.stringify(() => {}) вернёт undefined?

Ответы:

1. JSON.stringify({x:1})
2. "object"
3. Использовать try-catch
4. Функции не являются допустимыми значениями JSON

Теперь ты готов к работе с JSON в любых проектах! 🎉 Попробуй применить эти знания в своём коде прямо сегодня.