Что такое JSON: формат данных простыми словами

Вы открываете ответ какого-нибудь API и видите строку из фигурных скобок, кавычек и запятых. Это JSON, формат, на котором держится обмен данными почти во всём вебе. Разберём, как он устроен, чтобы такая строка перестала выглядеть шифром.

Что это вообще такое

JSON (JavaScript Object Notation) — текстовый формат для хранения и передачи данных. Его придумали в начале 2000-х как простой способ гонять данные между сервером и браузером, и с тех пор он стал стандартом: на JSON отвечают API, в нём пишут конфиги, в нём хранят настройки приложений.

Главная идея в том, что данные записываются парами «ключ — значение», понятными и человеку, и программе. Вот минимальный пример:

{
	"name": "Дмитрий",
	"age": 30,
	"isAdmin": false
}

Слева от двоеточия — ключ (всегда строка в двойных кавычках), справа — значение. Программа прочитает это и получит объект с тремя полями. Человек тоже всё поймёт, и в этом весь смысл формата.

Из чего состоит JSON

В JSON всего два «контейнера» и несколько типов значений.

• Объект пишут в фигурных скобках { }, это набор пар «ключ — значение» через запятую. Ключи уникальны, порядок значения не имеет.
• Массив пишут в квадратных скобках [ ], это упорядоченный список значений через запятую.

Значением может быть:

• строка в двойных кавычках: "привет";
• число без кавычек: 42, 3.14, -7;
• логическое true или false;
• null, то есть пустое значение;
• вложенный объект или массив, так строится любая глубина.

Собираем всё вместе:

{
	"user": "Дмитрий",
	"tags": ["frontend", "css", "js"],
	"settings": {
		"theme": "dark",
		"notifications": true
	},
	"lastLogin": null
}

Здесь tags — массив строк, settings — вложенный объект, lastLogin — пустое значение. Из таких кубиков собирается структура любой вложенности.

Где вы его встречаете

• В ответах API. Запрашиваете данные у сервера, и он почти наверняка отвечает в JSON. Список товаров, профиль пользователя, погода приходят в этом формате. Живой пример такого ответа есть в подборке бесплатных публичных API, без регистрации и ключей.
• В конфигах. package.json в Node.js, tsconfig.json, настройки редактора — это всё JSON.
• В хранилищах. Localstorage в браузере, документы в базах вроде MongoDB держат данные как JSON или очень близко к нему.
• В токенах. JWT, токен авторизации, содержит те же данные JSON, просто закодированные в base64. Содержимое можно раскодировать в читаемый JSON и посмотреть, что внутри.

JSON и JavaScript

Хотя в названии есть «JavaScript», JSON — независимый формат, его читают все языки. Но в JS с ним работать особенно удобно, всего две функции:

// строка JSON → объект JavaScript
const data = JSON.parse('{"name":"Дмитрий","age":30}')
data.name // "Дмитрий"

// объект JavaScript → строка JSON
const text = JSON.stringify({ name: 'Дмитрий', age: 30 })

JSON.parse разбирает текст в объект, JSON.stringify делает обратное. Именно parse спотыкается, если в JSON закралась ошибка, и роняет приложение. Поэтому данные удобно проверить и отформатировать JSON заранее, ещё до того, как они попадут в код.

Чем JSON отличается от XML и YAML

Одни и те же данные можно записать по-разному. JSON победил XML в вебе за счёт компактности: меньше символов, нет закрывающих тегов.

XML:   <user><name>Дмитрий</name></user>
JSON:  { "user": { "name": "Дмитрий" } }

YAML — другой популярный формат, по сути тот же JSON, но с отступами вместо скобок и с поддержкой комментариев. Его любят за читаемость и потому часто выбирают для конфигов:

user:
  name: Дмитрий
  tags:
    - frontend
    - css

На практике JSON берут для передачи данных между программами, а YAML для конфигов, которые правят руками. Перевести одно в другое можно за секунду: вставьте JSON и откройте вкладку YAML.

Частые ошибки, из-за которых JSON не читается

JSON строгий, и один лишний символ ломает весь файл. Самое частое:

• Висячая запятая после последнего элемента: {"a": 1,}. В JSON так нельзя, хотя в JavaScript можно.
• Одинарные кавычки. Строки и ключи бывают только в двойных: 'name' невалидно, нужно "name".
• Ключ без кавычек. {name: "Дмитрий"} — объект JavaScript, но не JSON. Правильно так: {"name": "Дмитрий"}.
• Незакрытая скобка или кавычка. Потеряли } или ", и парсер доходит до конца файла, так и не поняв структуру.
• Комментарии. В стандартном JSON их нет, // и /* */ сделают файл невалидным.

Ошибку бывает трудно найти глазами в большом файле. Проще вставить данные в валидатор. Он покажет строку и колонку, где именно сломалось, а заодно отформатирует и подсветит структуру.

Коротко

• JSON — текстовый формат данных из пар «ключ — значение», объектов {} и массивов [].
• Строки и ключи пишут в двойных кавычках; значением бывает строка, число, true/false, null, объект или массив.
• Это стандарт обмена данными в вебе: API, конфиги, хранилища.
• Синтаксис строгий. Висячая запятая, одинарные кавычки и комментарии делают файл невалидным, и всё это ловит проверка.