Работа с JSON в JavaScript: парсинг и сериализация для начинающих

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: что такое JSON и зачем он нужен в JavaScript?

JSON (JavaScript Object Notation) — это легкий текстовый формат обмена данными, основанный на синтаксисе объектов JavaScript. Несмотря на своё название, JSON является языково-независимым и поддерживается практически всеми современными языками программирования. В экосистеме Node.js и браузерного JavaScript работа с JSON — одна из самых частых операций: от получения данных с API до сохранения конфигураций и передачи информации между сервером и клиентом.

В этой статье мы разберем два ключевых метода: JSON.parse() (преобразование строки JSON в объект JavaScript) и JSON.stringify() (преобразование объекта JavaScript в строку JSON). Вы научитесь правильно обрабатывать ошибки, работать с вложенными структурами и использовать продвинутые возможности этих методов.

1. Парсинг JSON: метод JSON.parse()

Метод JSON.parse() принимает строку в формате JSON и преобразует её в объект, массив или примитивное значение JavaScript. Это основная операция, когда вы получаете данные от внешнего источника — например, из REST API или файла.

Базовый синтаксис

const jsonString = '{"name": "Анна", "age": 30, "isStudent": false}';
const user = JSON.parse(jsonString);

console.log(user.name);      // "Анна"
console.log(user.age);       // 30
console.log(user.isStudent); // false

Обратите внимание: ключи и строковые значения в JSON обязательно должны быть заключены в двойные кавычки. Одинарные кавычки или отсутствие кавычек у ключей приведут к ошибке.

Парсинг массивов

JSON может содержать не только объекты, но и массивы:

const jsonArray = '[1, 2, 3, "четыре", true]';
const arr = JSON.parse(jsonArray);

console.log(arr[0]); // 1
console.log(arr[3]); // "четыре"

Вложенные структуры

JSON поддерживает неограниченную вложенность:

const complexJson = '{"users":[{"id":1,"name":"Иван"},{"id":2,"name":"Мария"}]}';
const data = JSON.parse(complexJson);

console.log(data.users[0].name); // "Иван"
console.log(data.users[1].id);   // 2

Обработка ошибок парсинга

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

const invalidJson = '{"name": "Пётр", age: 25}'; // Ошибка: age без кавычек

try {
    const obj = JSON.parse(invalidJson);
    console.log(obj);
} catch (error) {
    console.error('Ошибка парсинга JSON:', error.message);
    // Вывод: Ошибка парсинга JSON: Unexpected token 'a', ...
}

Продвинутое использование: reviver-функция

Второй параметр JSON.parse() — это функция reviver, которая позволяет преобразовывать значения в процессе парсинга. Например, можно автоматически преобразовывать строки с датами в объекты Date:

const jsonWithDate = '{"name": "Событие", "date": "2025-03-15T10:00:00.000Z"}';

const event = JSON.parse(jsonWithDate, (key, value) => {
    if (key === 'date') {
        return new Date(value);
    }
    return value;
});

console.log(event.date instanceof Date); // true
console.log(event.date.getFullYear());   // 2025

2. Сериализация JSON: метод JSON.stringify()

Метод JSON.stringify() выполняет обратную операцию — преобразует объект или значение JavaScript в строку JSON. Это необходимо для отправки данных на сервер, сохранения в файл или логирования.

Базовый синтаксис

const user = {
    name: "Ольга",
    age: 28,
    isAdmin: true,
    skills: ["JS", "Python", "SQL"]
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Ольга","age":28,"isAdmin":true,"skills":["JS","Python","SQL"]}

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

Второй параметр JSON.stringify() — это replacer (функция или массив для фильтрации ключей), а третий — space (количество пробелов для отступов). Используйте space для читаемого вывода:

const config = {
    host: "localhost",
    port: 3000,
    debug: true
};

// Красивый вывод с отступами в 2 пробела
const prettyJson = JSON.stringify(config, null, 2);
console.log(prettyJson);
/*
{
  "host": "localhost",
  "port": 3000,
  "debug": true
}
*/

Фильтрация и преобразование с помощью replacer

Второй параметр replacer может быть массивом (включать только указанные ключи) или функцией:

const user = {
    id: 1,
    name: "Дмитрий",
    password: "secret123",
    email: "dmitry@example.com"
};

// Массив: оставляем только name и email
const filtered = JSON.stringify(user, ['name', 'email']);
console.log(filtered);
// {"name":"Дмитрий","email":"dmitry@example.com"}

// Функция: исключаем пароль
const safe = JSON.stringify(user, (key, value) => {
    if (key === 'password') {
        return undefined; // удаляем ключ
    }
    return value;
});
console.log(safe);
// {"id":1,"name":"Дмитрий","email":"dmitry@example.com"}