JSON-trævisning

Hvad er dette værktøj?

En JSON Tree Viewer omdanner et JSON-dokument til en navigerbar oversigt: hvert objekt og array bliver en node, du kan folde ud eller sammen, hver nøgle viser sin udledte type, og hver bladværdi vises inline. I stedet for at scrolle gennem tusindvis af linjer tekst, dykker du kun ned i de grene, du faktisk interesserer dig for.

Dette er anderledes end en JSON-formaterer. En formaterer omskriver teksten i din JSON med indrykning, så den ser pænere ud — det er det rigtige værktøj, når du blot skal pretty-printe, minificere eller validere syntaks. En tree viewer er til at udforske og navigere selve strukturen, især når JSON'en er stor, dybt indlejret, eller du endnu ikke ved, hvor de data, du har brug for, befinder sig. Hvis du blot vil pænificere eller validere JSON-tekst, brug JSON-formatereren i stedet.

Hvorfor bruge det?

• Naviger dybt indlejrede API-svar eller konfigurationsfiler uden at miste overblikket over, hvilken klamme der hører til hvilket niveau.
• Søg efter nøglenavn eller værdi og hop direkte til matchet, med stien automatisk foldet ud for dig.
• Håndterer meget store JSON-filer (flere megabytes) gnidningsfrit — underordnede noder bygges kun, når du folder dem ud, så intet fryser fanen.
• Se typen af hver værdi med det samme — streng, tal, boolean, null, objekt eller array — med tydelige labels.
• 100% privat: parsing og rendering sker helt i din browser, intet uploades eller gemmes.

Sådan bruger du det

1. Indsæt din JSON i inputboksen, eller brug filvælgeren til at indlæse en JSON-fil fra disken.
2. Klik "Render tree" for at bygge den interaktive visning.
3. Klik på pilen ved siden af et objekt eller array for at folde det ud eller sammen — noder dybere end et par niveauer starter automatisk sammenfoldede, så store filer forbliver responsive.
4. Skriv et nøglenavn eller en værdi i søgefeltet for at finde matches; værktøjet folder hver overordnet node ud på vejen ned og scroller til og fremhæver resultatet.
5. Brug næste/forrige-knapperne til at gennemgå flere matches.

Eksempel

Input

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

Output

user: { 4 nøgler }
  id: 42 (tal)
  name: "Ada" (streng)
  roles: [ 2 elementer ]
    0: "admin"
    1: "editor"
  active: true (boolean)
  manager: null

Hver række viser nøglen, dens udledte type, og enten værdien (for blade) eller et sammenfoldet antal (for objekter og arrays), indtil du folder den ud.

Praktiske tips

• For store API-svar, søg efter et karakteristisk feltnavn først (som et id eller en fejlkode) i stedet for manuelt at folde node for node ud — søgningen hopper direkte derhen.
• Noder efter de første par niveauer starter sammenfoldede med vilje, så en payload på flere megabytes forbliver responsiv; fold kun den gren ud, du har brug for.
• Type-badges (streng, tal, boolean, null, objekt, array) er særligt nyttige til at spotte et felt, der uventet er null, eller et array, hvor du forventede et objekt.
• Hvis du blot skal pretty-printe eller validere en JSON-snippet i stedet for at udforske dens struktur, er JSON-formatereren hurtigere til den opgave.

Hvor dette passer ind i den virkelige verden

Dybt indlejrede API-svar, databaseudtræk og konfigurationsfiler er svære at ræsonnere om som flad tekst — du mister overblikket over, hvilken lukkeparentes der hører til hvilken nøgle. At indlæse den samme payload i en tree view lader dig folde alt det sammen, du ikke har brug for, og fokusere kun på den gren, der betyder noget, hvilket er langt hurtigere end at scrolle gennem en formateret mur af tekst og lede efter ét felt.

Et almindeligt flow: indsæt en stor webhook-payload her først for at forstå dens form og finde det felt, du har brug for, og skift derefter til JSON-formatereren, hvis du har brug for en ren, indrykket tekstkopi til at indsætte i en fejlrapport eller kodegennemgang.

→ JSON-formaterer

Almindelige brugsscenarier

• Udforske et stort, dybt indlejret API-svar for at finde, hvor et bestemt felt befinder sig, før du skriver kode mod det.
• Gennemgå en stor konfigurations- eller eksportfil uden at scrolle gennem tusindvis af linjer rå tekst.
• Tjekke formen og typerne af en ukendt JSON-payload, før du parser den i din egen kode.
• Lokalisere en bestemt værdi (et ID, en fejlbesked, et tidsstempel) begravet et sted inde i et stort JSON-dokument.

Ofte stillede spørgsmål