VELDAT

Просмотреть JSON деревом

Текст обрабатывается в браузере и не отправляется на сервер.

Показывает JSON деревом: узлы раскрываются, поиск идёт по ключам и значениям, у выбранного узла виден путь вида $.items[0].sku. Значения и ключи можно править прямо в дереве, а схема структуры показывает поля и типы всех элементов.

Данные

Вставьте данные или откройте файл: дерево и перевод в другие форматы появятся здесь.

Схема появится, когда в поле будут данные

Дальше обычно делают

Зачем смотреть JSON деревом

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

Так проще разобраться с незнакомыми данными: понять, что прислал API, найти поле в выгрузке, проверить, заполнено ли оно у всех записей. Путь к значению, например $.order.items[1].price, пригодится, чтобы точно объяснить разработчику, о каком поле речь, или указать поле в настройках интеграции, где путь записывается так же.

Как пользоваться

  1. Вставьте JSON в поле или откройте файл до 20 МБ. Справа откроется вкладка «Дерево».

  2. Раскрывайте узлы или ищите по ключам и значениям: «Найти в дереве» покажет счётчик совпадений, стрелки переходят между ними.

  3. Выберите узел: внизу появится его путь, а в поле слева подсветится его место. Двойной щелчок по значению или ключу открывает правку.

Пример

Было
{"order": {"id": 10482, "customer": {"name": "ООО Ромашка"}, "items": [{"sku": "A-100", "price": 450.5}, {"sku": "B-205", "price": 3900}]}}
Стало
order      объект · 3 ключа
  id         10482
  customer   объект · 1 ключ
  items      массив · 2
    1        объект · 2 ключа
      price  3900
Путь: $.order.items[1].price

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

Как скопировать путь к значению?

Выберите узел и нажмите «Копировать путь» под деревом. Путь записан как в JSONPath: $.order.items[1].price, ключ с пробелом — в кавычках, $["first name"]. Если поставить курсор в поле слева, дерево само выберет узел, в котором он стоит.

Можно ли править JSON в дереве?

Да: значение, имя ключа, удаление узла и новый ключ или элемент массива. Правка сразу попадает в поле слева, меняется только это место, а отступы и порядок остального текста остаются. Ctrl+Z в поле её отменяет. Так же правится YAML, а XML и CSV в дереве только просматриваются.

Как посмотреть большой файл?

Файл до 20 МБ открывается без зависания: у большого массива в дереве сначала первые 100 элементов и «Показать ещё 100», а поиск находит значения и за ними. «Развернуть всё» раскрывает до 2 000 строк.

Как понять, какие поля есть у всех элементов массива?

Ниже, в секции «Структура», схема сводит все элементы массива в один блок: у поля видны тип и доля элементов, где оно есть, например 40/120. Схему можно скачать картинкой или выгрузить типами TypeScript и JSON Schema.

Задача сложнее инструмента

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

Записаться на консультацию