Работа с JSON в JavaScript

Сейчас мы с вами будем разбираться с форматом JSON (читается 'джейсон'). Этот формат удобен для компактного хранения данных, а также для обмена данными между сайтами или между сайтом и браузером.

Формат JSON

Сам JSON представляет собой строку. В этой строке данные хранятся в формате, похожим на обычные объекты JavaScript. Но есть отличия: все строки (как ключи, так и значения) обязательно должны быть в двойных кавычках. Одинарные кавычки и ключи без кавычек запрещены.

Кроме того: числа в кавычки можно не брать, разрешены значения null и true/false. Также в качестве значений могут быть массивы и объекты любого уровня вложенности.

Давайте посмотрим на строки с корректным JSON:

var json = '[0, 1, 2, 3]';

var json = '{
	"name": "Иван",
	"age": 20,
	"online": true,
	"wife": null,
	"arr": [1, 2, 3, 4],
}';

А вот этот JSON будет некорректным:

var json = '{
	name: "Иван", //ключ без кавычек недопустим
	"age": '20', //одинарные кавычки недопустимы
}';

var result = JSON.parse(json);
console.log(result);

Давайте теперь рассмотрим методы для работы с JSON.

Метод JSON.parse

Метод JSON.parse преобразует строку с JSON в обычный объект JavaScipt, с которым можно будет работать дальше обычными средствами:

var json = '{
	"name": "Иван",
	"age": 20,
	"online": true,
	"wife": null,
	"arr": [1, 2, 3, 4],
}';

var result = JSON.parse(json);
console.log(result); //увидим объект

Метод JSON.stringify

Метод JSON.stringify преобразует объекты JavaScript в строку JSON. Посмотрим на следующих примерах:

var obj = {
	name: 'Иван',
	age: 20,
	bool: true,
	arr: [1, 2, 3, 4],
};

var json = JSON.stringify(obj);
console.log(json);

В результате преобразования получится такая строка:

'{
	"name": "Иван",
	"age": 20,
	"empty": null,
	"arr": [1, 2, 3, 4],
}';

Учтите, что NaN и Infinity преобразуются в null:

var obj = {
	value1: null,
	value2: NaN,
	value3: Infinity,
};

json = JSON.stringify(obj);
console.log(json);

В результате преобразования получится такая строка:

'{
	"value1": true,
	"value2": null,
	"value3": null,
}';

Преобразование объекта в JSON называется сериализацией (говорят: сериализуем объект в строку).