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-контексті, що й сторінка, і вкладка «Мережа» не показує запитів при натисканні «Побудувати дерево». Після першого завантаження сторінка працює офлайн.