JSON-дерево
Изучайте JSON как сворачиваемое дерево с типовыми бейджами, путями JSON Pointer и поиском
JSON
Дерево
Вставьте JSON слева и нажмите «Построить дерево».
JSON-дерево
Изучайте JSON как сворачиваемое дерево с типовыми бейджами, путями JSON Pointer и поиском
Возможности
- Рекурсивное сворачиваемое дерево: у каждого узла-объекта и массива свой переключатель раскрытия/сворачивания, корень развёрнут по умолчанию — структура сразу видна
- JSON Pointer (RFC 6901) на каждом узле — наведите курсор на ключ, чтобы увидеть полный путь, нажмите значок цепочки, чтобы скопировать для патчей, диффов или instancePath схемы
- Типизированные бейджи окрашивают каждый узел по реальному типу (string / number / boolean / null / array / object) — null больше не прячется за typeof 'object' JavaScript
- Колонка превью показывает однострочное резюме: скаляры inline, массивы как `[ N ]` с количеством элементов, объекты как `{ N }` с количеством ключей — размер виден до раскрытия
- Фильтр поиска ищет по ключам, путям JSON Pointer и тексту превью; дерево сжимается только до ветвей с попаданием — поиск в документах 10 МБ работает
- Кнопка «Копировать значение» пишет значение узла в буфер — строки как сырой текст, сложные типы как pretty-print JSON, готовые ко вставке в другой инструмент
- Ошибки разбора включают полное сообщение движка JavaScript (часто со строкой/колонкой), чтобы починить ввод, а не угадывать
- Полностью на стороне клиента: ввод не покидает браузер, всё дерево строится в памяти, без телеметрии, и страница работает офлайн после кеширования
Как использовать
- Вставьте JSON в левое поле или нажмите «Загрузить пример» для маленького примера.
- Нажмите «Построить дерево». Корень показан развёрнутым; нажмите шеврон рядом с любым узлом-объектом/массивом, чтобы спуститься.
- Используйте поле поиска для фильтрации по имени ключа, значению или пути JSON Pointer — видимы только совпадающие ветви.
- Наведите курсор на ключ, чтобы увидеть путь JSON Pointer во всплывающей подсказке; нажмите значок цепочки, чтобы скопировать.
- Нажмите значок копирования, чтобы получить значение узла — скаляры в сыром виде, объекты/массивы как pretty-print JSON.
- Используйте «Развернуть всё» / «Свернуть всё», чтобы перевернуть всё дерево за раз.
Советы и лучшие практики
- Удерживайте Shift при клике по переключателю, чтобы быстрее сворачивать/разворачивать целые ветви — когда системный шорткат назначен, кнопка переключателя продолжает работать индивидуально.
- При отладке ищите по значению (не только по ключу) — текст превью включён в совпадение.
- Скопируйте JSON Pointer здесь и вставьте в отчёт ошибок JSON Schema Validator, чтобы подтвердить точный узел, сломавший валидацию.
- Если дерево тормозит, сначала сверните самый большой массив — длинные массивы доминируют в стоимости рендера.
- Сочетайте с JSON Diff: скопируйте значение до/после изменения, чтобы увидеть точное редактирование на уровне узла.
Вопросы и ответы
Что такое JSON Pointer и как его использовать?
JSON Pointer (RFC 6901) — путь со слешами, точно именующий один узел в JSON-документе: `/owner/name` — поле name объекта owner; `/tags/1` — второй элемент массива tags. Корень — пустая строка (здесь показан как `/`). Этот инструмент использует тот же формат, что и ошибки instancePath JSON Schema, и инструменты вроде fast-json-patch, так что вы можете скопировать pointer отсюда и использовать как прямую ссылку в другом месте.
Чем типовой бейдж отличается от typeof JavaScript?
Двумя способами. Во-первых, null показывается как 'null' (typeof null === 'object' в JavaScript — давняя бородавка). Во-вторых, массивы показываются как 'array', а не как 'object' typeof, потому что отображаются и ведут себя иначе. Это соответствует шести типам значений спецификации JSON: string, number, boolean, null, array, object.
Как работает поиск?
Запрос сопоставляется без учёта регистра с ключом, путём JSON Pointer и строкой превью узла. Ветвь остаётся видимой, если она или какой-либо потомок совпадает — можно искать глубоко вложенное значение и всё ещё видеть ключи на пути к нему. Очистите поле, чтобы вернуть полное дерево.
Справляется ли с очень большим JSON?
Строит всё дерево в памяти один раз, так что мегабайтные документы рендерятся комфортно. Сотни мегабайт JSON могут быть тугими на телефонах с малой ОЗУ; для такого диапазона предпочитайте потоковые инструменты или сначала запустите JSON Minify, чтобы убрать пробелы. Рендеринг не виртуализирован — каждый видимый узел рендерится в DOM-элемент — так что свернуть большие ветви — хитрость, если кажется медленным.
Сворачивание узла теряет данные?
Нет. Сворачивание чисто визуально — лежащий ниже разобранный объект остаётся в памяти, так что повторное раскрытие сразу показывает то же содержимое. Поиск игнорирует состояние сворачивания и раскрывает совпадения внутри свёрнутых узлов.
Почему превью показывает `{ 0 }` для пустого объекта?
Число в скобках — количество ключей для объектов и длина для массивов. Объекты с нулём ключей и массивы нулевой длины — валидный JSON и не одно и то же значение (`{}` vs `[]`), так что показ счёта и скобок делает тип и размер очевидными с первого взгляда.
Чем это отличается от вкладки дерева в JSON Formatter?
Дерево JSON Formatter — одна из многих вкладок (наряду с pretty-print, JSONPath, валидацией схемы, преобразованиями, diff). Этот инструмент — отдельный «только дерево»: один URL, одна задача, более глубокое взаимодействие на узел (типовые бейджи, копирование pointer на узел, копирование значения на узел) без поверхностей форматирования/преобразования/валидации.
Отправляется ли что-нибудь на сервер?
Нет. JSON остаётся в вашем браузере, разбор и построение дерева работают синхронно в том же JavaScript-контексте, что и страница, и вкладка «Сеть» не показывает запросов при нажатии «Построить дерево». После первой загрузки страница работает офлайн.