Дерево JSON

Локальная обработка
app.tree.view

Данные также можно передать через #data={"name":"Ada"} или #url=... После чтения параметры сразу удаляются из адресной строки.

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

JSON показывается как сворачиваемое дерево. При глубокой вложенности и множестве полей это яснее, чем искать скобки в тексте, и виден тип каждого узла. По клику копируется JSONPath — удобно вставить в тест или на страницу JSONPath.

Развернуть / свернуть

Сверните лишние ветки и смотрите только нужный путь. По умолчанию открыты несколько верхних уровней, более глубокие — по клику.

У объекта видно число полей, у массива — число элементов, так проще оценить объём.

Тип виден сразу

Объекты, массивы, строки, числа, логические значения и null различаются. Так вы не примете "123" и 123 за одно и то же.

Удобно при совместной отладке проверить фактический тип ответа бэкенда.

Дополняет распознавание полей

Дерево отвечает за структуру; метки времени и цвета — на странице распознавания полей. Сначала найдите путь в дереве, затем проверьте, не особый ли формат у листа.

Только просмотр: бизнес-данные в дереве напрямую не правятся.

Пример

Данные, которые удобно смотреть деревом
{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}
Вы увидите
 корень — объект → config — объект → limits — объект → maxSizeMB — число. Достаточно открыть узлы, не считая скобки. 
Можно ли менять значения прямо в дереве?

Страница в основном для просмотра. После правок снова проверяйте: вставьте текст на странице форматирования.

Что делать с очень большим JSON?

Сначала вырежьте поддерево через JSONPath, затем разворачивайте.

Что происходит по клику на узел?

JSONPath узла (например $.user.id ) копируется в буфер — удобно для утверждений в тестах.

Что открывать раньше: дерево или форматирование?

Сначала получите корректный JSON. Некорректный текст дерево не построит — проверьте или отформатируйте.

Рекомендуемый процесс

  1. Вставьте корректный JSON или загрузите пример, чтобы увидеть разворот дерева.
  2. Сверните лишние ветки и дойдите до нужного поля.
  3. Скопируйте путь, проверьте на странице JSONPath или вставьте в тест.
  4. Если лист похож на метку времени или URL, подтвердите на странице распознавания полей.

Дерево нужно, чтобы «увидеть структуру»; JSONPath — чтобы «взять значения пакетом». Для большого документа вместе это быстрее, чем разворачивать всё.