Русский
Форматируйте, проверяйте и изучайте JSON с живым деревом.
Последнее обновление
JSON-форматтер (он же beautifier или pretty-printer) превращает сжатый или нечитаемый JSON в аккуратные данные с отступами. Это один из самых востребованных инструментов разработчика — пригождается, когда смотришь ответы API, читаешь конфиги, разбираешь логи, сравниваешь тестовые фикстуры или гоняешь данные между фронтом и бэком.
JSON — формат строгий: ключи и строки только в двойных кавычках, запятые на своих местах, каждая открывающая { или [ обязана быть закрыта. Форматтер делает структуру наглядной, а встроенный валидатор точно показывает, где синтаксис сломался.
JSON расшифровывается как JavaScript Object Notation. Хотя формат вырос из JavaScript, читать и писать его умеет практически любой язык программирования — поэтому он де-факто стал стандартом обмена структурированными данными в вебе.
{} — это набор именованных полей, массивы [] — упорядоченный список значений. Их можно вкладывать друг в друга на любую глубину.null, объект и массив. Никаких undefined, функций и комментариев.Скопируйте JSON из ответа API, лога или конфига и вставьте слева. Форматтер принимает как минифицированный, так и частично оформленный ввод.
Чаще всего используют 2 пробела, реже — 4. Берите тот вариант, который уже принят в вашем проекте.
Если JSON валидный, справа появится отформатированный вывод. Если нет — в сообщении об ошибке будет указана строка и позиция, где парсер споткнулся.
В сворачиваемом дереве удобно прятать глубоко вложенные объекты и массивы. Это самый быстрый способ понять, как устроен незнакомый ответ API.
Заберите красиво оформленный JSON в код или документацию — либо обратно сожмите в одну строку для хранения и передачи по сети.
Полный набор кирпичиков JSON. Всё, чего нет в этом списке, валидным JSON не является. Спецификации: RFC 8259 и ECMA-404.
| Токен | Что означает | Пример |
|---|---|---|
{ } | Объект — набор пар ключ/значение | {"name": "Maya"} |
[ ] | Массив — упорядоченный список значений | [1, 2, 3] |
"..." | Строка — всегда в двойных кавычках | "hello" |
| Число | Целое или с плавающей точкой, без кавычек и без ведущего + | 42, -3.14 |
true / false | Булевы значения, строго в нижнем регистре | true |
null | Пустое или отсутствующее значение | null |
: | Разделитель между ключом и его значением | "id": 7 |
, | Разделитель между элементами — в конце не ставится | [1, 2, 3] |
{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}{ "user": { "id": 7, "name": "Maya" }, "skills": ["HTML", "JavaScript"]}После форматирования вложенный объект user и массив skills становятся гораздо читабельнее. Данные те же — изменились только пробелы и переносы.
{ "name": "Coddy", "active": true,}В JSON нельзя ставить запятую после последнего свойства. Валидатор подсветит закрывающую }. Это одна из самых частых ошибок, когда переносят синтаксис JS-объекта в JSON.
{ "count": 3, "countText": "3", "enabled": true}3 — число, "3" — строка, true — булево. Три разных типа JSON. API часто ломаются именно потому, что структура правильная, а тип значения — нет.
{ "data": { "orders": [ { "id": 101, "items": [{ "sku": "A", "qty": 2 }] }, { "id": 102, "items": [] } ] }}В дереве удобно свернуть data.orders и постепенно раскрывать структуру уровень за уровнем. Вложенные массивы объектов — самый распространённый шаблон в REST-ответах.
undefined в JSON невалидны, висящие запятые тоже не пройдут парсер.+, иметь ведущие нули (кроме самого 0) и не должны быть в кавычках, если вы реально хотите тип «число».null остаются ровно теми же. Если потом минифицировать обратно — получится исходная компактная форма для сети.undefined не допускаются.package.json, tsconfig.json), метаданные пакетов, строки логов, localStorage в браузере, тестовые фикстуры.