Просмотр JSON в виде дерева (JSON viewer онлайн)

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

Ответы API с десятками уровней вложенности неудобно читать даже отформатированными. Дерево показывает структуру целиком: какие поля есть, где массивы и сколько в них элементов, какого типа значения.

Как посмотреть JSON деревом

Откройте песочницу JSON и вставьте документ.
Справа на вкладке Дерево появится структура: у объектов — число ключей, у массивов — число элементов, у значений — тип (string, number, boolean, null).
Узлы сворачиваются и разворачиваются щелчком по стрелке.

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

Приёмы работы

Сначала свернуть, потом раскрывать нужное: так видна общая схема документа — полезно, когда вы впервые смотрите на ответ чужого API.
Сворачивание в коде: стрелки у номеров строк слева сворачивают блоки прямо в тексте.
Перевод в YAML для чтения: вкладка YAML рядом показывает тот же документ без скобок и кавычек — иногда так он читается быстрее.

Если дерево не появляется

Дерево строится только для корректного JSON. При ошибке синтаксиса справа остаётся последняя корректная версия, а ошибка подсвечивается в строке кода. См. «Проверка JSON на ошибки».

Вывести схему из ответа

Если по ответу API нужно описать его формат для документации, преобразуйте пример в JSON Schema: Файл → Преобразовать в → JSON Schema — по примеру. Подробнее — «Генерация JSON Schema из JSON».

Пример: незнакомый ответ API

Вы получили ответ платёжного сервиса на 300 строк. В дереве сразу видно:

корень — объект из 6 ключей; data — массив из 25 элементов, meta — объект с пагинацией;
у элемента массива поле amount — number, currency — string, refunds — массив, который бывает пустым;
metadata у части элементов — null.

Этого достаточно, чтобы описать формат в постановке или написать маппинг — не читая все 300 строк.

Вопросы и ответы

Можно ли открыть JSON по ссылке на API? Нет, редактор не делает запросы. Сохраните ответ в файл (в браузере, curl или Postman) и откройте его через Файл → Открыть файл… или перетащите в редактор.

Как найти конкретное поле? Поиск по тексту — Ctrl+F в редакторе; в дереве удобнее сначала свернуть всё и раскрывать путь к нужному полю.

Можно ли посмотреть YAML деревом? Да, в редакторе YAML — там дерево ещё и показывает якоря и ссылки.