CodeKitHub
Nástroje JSON

JSON Prehliadač Stromu

Naposledy aktualizované:

Vložte alebo nahrajte svoj JSON a prehliadajte ho ako interaktívny, rozbaliteľný strom namiesto steny textu. Kliknutím na akýkoľvek uzol ho rozbaľte alebo zbaľte, a použite vyhľadávacie pole na priamy skok na kľúč alebo hodnotu ukrytú hlboko vo vnútri veľkej štruktúry. Všetko beží lokálne vo vašom prehliadači — vaše dáta sa nikdy nenahrávajú.

Čo je tento nástroj?

JSON prehliadač stromu zmení JSON dokument na navigovateľný obrys: každý objekt a pole sa stane uzlom, ktorý môžete rozbaliť alebo zbaliť, každý kľúč zobrazuje svoj odvodený typ a každá koncová hodnota sa zobrazuje priamo v riadku. Namiesto rolovania cez tisíce riadkov textu sa ponoríte len do vetiev, na ktorých vám skutočne záleží.

Toto sa líši od JSON formátovača. Formátovač prepisuje text vášho JSON s odsadením, aby vyzeral krajšie — je to správny nástroj, keď potrebujete len prehľadne vytlačiť, minifikovať alebo validovať syntax. Prehliadač stromu je určený na preskúmanie a navigáciu samotnej štruktúry, najmä keď je JSON veľký, hlboko vnorený, alebo ešte neviete, kde sa dáta, ktoré potrebujete, nachádzajú. Ak chcete len prehľadne vytlačiť alebo validovať JSON text, použite namiesto toho JSON Formátovač.

Prečo ho používať?

  • Navigujte hlboko vnorenými odpoveďami API alebo konfiguračnými súbormi bez straty prehľadu, ktorá zátvorka patrí ktorej úrovni.
  • Vyhľadávajte podľa názvu kľúča alebo hodnoty a preskočte priamo na zhodu, s automaticky rozbalenou cestou.
  • Plynulo zvláda veľmi veľký JSON (niekoľko megabajtov) — podradené uzly sa vytvárajú len pri ich rozbalení, takže nič nezmrazí kartu.
  • Na prvý pohľad vidíte typ každej hodnoty — reťazec, číslo, boolean, null, objekt alebo pole — s jasnými štítkami.
  • 100% súkromné: parsovanie a vykresľovanie prebieha úplne vo vašom prehliadači, nič sa nenahráva ani neukladá.

Ako sa používa

  1. Vložte svoj JSON do vstupného poľa, alebo použite výber súboru na načítanie JSON súboru z disku.
  2. Kliknite na "Render tree" pre vytvorenie interaktívneho zobrazenia.
  3. Kliknite na šípku vedľa akéhokoľvek objektu alebo poľa pre jeho rozbalenie alebo zbalenie — uzly hlbšie ako pár úrovní začínajú automaticky zbalené, aby veľké súbory zostali responzívne.
  4. Zadajte názov kľúča alebo hodnotu do vyhľadávacieho poľa pre nájdenie zhôd; nástroj rozbalí každý nadradený uzol na ceste dole a skroluje k výsledku a zvýrazní ho.
  5. Použite tlačidlá ďalej/späť na prechádzanie viacerých zhôd.

Príklad

Vstup

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

Výstup

user: { 4 kľúče }
  id: 42 (číslo)
  name: "Ada" (reťazec)
  roles: [ 2 položky ]
    0: "admin"
    1: "editor"
  active: true (boolean)
  manager: null

Každý riadok zobrazuje kľúč, jeho odvodený typ a buď hodnotu (pre koncové uzly) alebo zbalený počet (pre objekty a polia), kým ho nerozbalíte.

Praktické tipy

  • Pri obrovských odpovediach API najprv vyhľadajte výrazný názov poľa (ako id alebo chybový kód) namiesto ručného rozbaľovania uzol po uzle — vyhľadávanie tam skočí priamo.
  • Uzly za prvými pár úrovňami začínajú zámerne zbalené, aby viacmegabajtový payload zostal responzívny; rozbaľte len vetvu, ktorú potrebujete.
  • Odznaky typu (reťazec, číslo, boolean, null, objekt, pole) sú obzvlášť užitočné na odhalenie poľa, ktoré je neočakávane null, alebo poľa tam, kde ste očakávali objekt.
  • Ak potrebujete len prehľadne vytlačiť alebo validovať úryvok JSON namiesto preskúmania jeho štruktúry, JSON Formátovač je na túto úlohu rýchlejší.

Kde sa to hodí v reálnych workflow

Hlboko vnorené odpovede API, exporty databáz a konfiguračné súbory sa ťažko chápu ako plochý text — strácate prehľad o tom, ktorá uzatváracia zátvorka patrí ktorému kľúču. Načítanie rovnakého payloadu do zobrazenia stromu vám umožní zbaliť všetko, čo nepotrebujete, a sústrediť sa len na vetvu, na ktorej záleží, čo je oveľa rýchlejšie ako rolovanie cez naformátovanú stenu textu pri hľadaní jedného poľa.

Bežný postup: najprv sem vložte veľký webhook payload, aby ste pochopili jeho tvar a našli pole, ktoré potrebujete, potom prepnite na JSON Formátovač, ak potrebujete čistú, odsadenú textovú kópiu na vloženie do hlásenia o chybe alebo code review.

JSON Formátovač

Bežné prípady použitia

  • Preskúmanie veľkej, hlboko vnorenej odpovede API kvôli nájdeniu, kde sa nachádza konkrétne pole, pred písaním kódu proti nemu.
  • Kontrola veľkého konfiguračného alebo exportného súboru bez rolovania cez tisíce riadkov surového textu.
  • Kontrola tvaru a typov neznámeho JSON payloadu pred jeho parsovaním vo vlastnom kóde.
  • Nájdenie konkrétnej hodnoty (ID, chybovej správy, časovej pečiatky) ukrytej niekde vo vnútri veľkého JSON dokumentu.

Časté otázky

Ako sa toto líši od nástroja JSON Formátovač?

JSON Formátovač prepisuje JSON text s odsadením, minifikuje ho, alebo validuje syntax — pracuje so samotným textom. JSON Prehliadač Stromu vykresľuje parsovanú štruktúru ako interaktívny, rozbaliteľný strom, cez ktorý môžete klikať a vyhľadávať — je postavený na preskúmanie a pochopenie tvaru veľkých alebo hlboko vnorených dát, nie na produkciu naformátovaného textového výstupu.

Zmrazí toto môj prehliadač pri obrovskom JSON súbore?

Nie. Strom sa vykresľuje lenivo: len prvých pár úrovní sa vytvorí pri prvom vykreslení, a všetko hlbšie sa vytvorí len v momente, keď kliknete na rozbalenie. Toto udržuje počiatočné vykreslenie rýchle aj pre viacmegabajtové súbory, pretože prehliadač nikdy nemusí vytvoriť DOM uzol pre dáta, ktoré ste ešte nevideli.

Nahrávajú sa moje JSON dáta niekam?

Nie. Parsovanie, vykresľovanie a vyhľadávanie prebieha úplne lokálne vo vašom prehliadači pomocou JavaScriptu. Vaše dáta nikdy neopustia vaše zariadenie.

Ako funguje vyhľadávanie?

Vyhľadávanie kontroluje každý názov kľúča a každú primitívnu hodnotu v celom parsovanom dokumente, nielen to, čo je momentálne viditeľné na obrazovke. Keď nájde zhodu, automaticky rozbalí každý nadradený uzol, aby ste ju videli, potom k nej skroluje a krátko ju zvýrazní. Ak existuje viac zhôd, použite tlačidlá ďalej/späť na prechádzanie.

Môžem vyhľadávať vo vnútri zbalených uzlov?

Áno. Vyhľadávanie vždy prechádza celý podkladový JSON objekt, bez ohľadu na to, ktoré uzly sú momentálne rozbalené alebo zbalené v zobrazení. Zbalenie uzla ovplyvňuje len to, čo sa vykresľuje na obrazovke, nie to, čo sa dá nájsť.

Súvisiace nástroje