Преобразование типов (Массивы и Объекты) через JSON

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

`JSON.stringify()`

Превращает объект или массив в строку в формате JSON — текстовом формате, понятном и серверам, и клиентам.

Про сам формат мы прочтем в следующей теме.

const user = {
  name: 'Анна',
  age: 28,
  isAdmin: false,
  tasks: ['Почитать', 'Написать код']
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"Анна","age":28,"isAdmin":false,"tasks":["Почитать","Написать код"]}'

Важно: JSON.stringify() не работает с функциями, undefined, Symbol и Map/Set. Они будут проигнорированы или заменены на null.

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

const obj = {
  name: 'Иван',
  func: function() { return 'test'; },
  secret: undefined
};

console.log(JSON.stringify(obj));
// '{"name":"Иван"}' — функция и undefined пропущены

`JSON.parse()`

Превращает строку в формате JSON обратно в объект или массив.

const json = '{"name":"Анна","age":28,"isAdmin":false}';

const user = JSON.parse(json);
console.log(user.name); // "Анна"
console.log(user.age);  // 28
console.log(typeof user); // "object"

Если строка не является корректным JSON — будет ошибка SyntaxError.

Пример ошибки:

JSON.parse('{name: "Иван"}'); // Ошибка! Ключи должны быть в кавычках
JSON.parse('{"name": "Иван"'); // Ошибка! Нет закрывающей скобки

Использование при работе с API

При запросах к серверу (через fetch, axios и т.д.) данные приходят в виде строки в формате JSON. Чтобы работать с ними как с объектами — нужно их распарсить.

fetch('/api/user')
  .then(response => response.json()) // автоматически вызывает JSON.parse()
  .then(user => {
    console.log(user.name); // теперь можно работать как с объектом
  });

Также при сохранении данных в localStorage — они должны быть строками:

const tasks = [{ title: 'Убраться', completed: false }];

// Сохраняем
localStorage.setItem('tasks', JSON.stringify(tasks));

// Загружаем
const saved = localStorage.getItem('tasks');
const tasksList = JSON.parse(saved);
console.log(tasksList[0].title); // "Убраться"

Всегда используйте JSON.stringify() перед сохранением объектов в localStorage или отправкой на сервер.
Всегда используйте JSON.parse() после получения строки из localStorage или ответа API.