JSON-trädvisare online — Utforska stora och nästlade JSON

Klistra in eller ladda upp din JSON och bläddra i den som ett interaktivt, hopfällbart träd istället för en vägg av text. Klicka på valfri nod för att expandera eller fälla ihop den, och använd sökrutan för att hoppa direkt till en nyckel eller ett värde begravt djupt inuti en stor struktur. Allt körs lokalt i din webbläsare — din data laddas aldrig upp.

Vad är detta verktyg?

En JSON-trädvisare förvandlar ett JSON-dokument till en navigerbar disposition: varje objekt och array blir en nod du kan expandera eller fälla ihop, varje nyckel visar sin härledda typ, och varje bladvärde visas inline. Istället för att skrolla genom tusentals rader text går du bara ner i de grenar du faktiskt bryr dig om.

Detta skiljer sig från en JSON-formaterare. En formaterare skriver om texten i din JSON med indentering så den ser snyggare ut — det är rätt verktyg när du bara behöver snygga till, minifiera eller validera syntax. En trädvisare är till för att utforska och navigera själva strukturen, särskilt när JSON:en är stor, djupt nästlad, eller du ännu inte vet var datan du behöver finns. Om du bara vill snygga till eller validera JSON-text, använd istället JSON-formateraren.

Varför använda det?

Navigera i djupt nästlade API-svar eller konfigurationsfiler utan att tappa bort vilken hakparentes som hör till vilken nivå.
Sök efter nyckelnamn eller värde och hoppa direkt till träffen, med sökvägen automatiskt expanderad åt dig.
Hanterar mycket stor JSON (flera megabyte) smidigt — undernoder byggs bara när du expanderar dem, så inget fryser fliken.
Se typen av varje värde med ett ögonkast — sträng, tal, boolean, null, objekt eller array — med tydliga etiketter.
100% privat: tolkning och rendering sker helt i din webbläsare, inget laddas upp eller lagras.

Så använder du det

Klistra in din JSON i inmatningsrutan, eller använd filväljaren för att läsa in en JSON-fil från disk.
Klicka på "Rendera träd" för att bygga den interaktiva vyn.
Klicka på pilen bredvid ett objekt eller en array för att expandera eller fälla ihop den — noder djupare än ett par nivåer börjar hopfällda automatiskt så stora filer förblir responsiva.
Skriv ett nyckelnamn eller värde i sökrutan för att hitta träffar; verktyget expanderar varje förälder-nod på vägen ner och skrollar till och markerar resultatet.
Använd nästa/föregående-knapparna för att stega genom flera träffar.

Exempel

Inmatning

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

Resultat

user: { 4 nycklar }
  id: 42 (tal)
  name: "Ada" (sträng)
  roles: [ 2 poster ]
    0: "admin"
    1: "editor"
  active: true (boolean)
  manager: null

Varje rad visar nyckeln, dess härledda typ, och antingen värdet (för blad) eller ett hopfällt antal (för objekt och arrayer) tills du expanderar det.

Praktiska tips

För stora API-svar, sök efter ett distinkt fältnamn först (som ett ID eller en felkod) istället för att manuellt expandera nod för nod — sökningen hoppar direkt dit.
Noder bortom de första nivåerna börjar hopfällda med flit, så att en flera megabyte stor payload förblir responsiv; expandera bara den gren du behöver.
Typmärken (sträng, tal, boolean, null, objekt, array) är särskilt användbara för att upptäcka ett fält som oväntat är null eller en array där du förväntade dig ett objekt.
Om du bara behöver snygga till eller validera ett JSON-avsnitt istället för att utforska dess struktur, går JSON-formateraren snabbare för det jobbet.

Var detta passar in i verkliga arbetsflöden

Djupt nästlade API-svar, databasexporter och konfigurationsfiler är svåra att resonera kring som platt text — du tappar bort vilken avslutande klammer som hör till vilken nyckel. Att ladda samma payload i en trädvy låter dig fälla ihop allt du inte behöver och fokusera bara på den gren som spelar roll, vilket är mycket snabbare än att skrolla genom en formaterad textvägg och leta efter ett fält.

Ett vanligt flöde: klistra in en stor webhook-payload här först för att förstå dess form och hitta fältet du behöver, byt sedan till JSON-formateraren om du behöver en ren, indenterad textkopia att klistra in i en buggrapport eller kodgranskning.

→ JSON-formaterare

Vanliga användningsfall

Utforska ett stort, djupt nästlat API-svar för att hitta var ett specifikt fält finns innan du skriver kod mot det.
Granska en stor konfigurations- eller exportfil utan att skrolla genom tusentals rader rå text.
Kontrollera formen och typerna på en obekant JSON-payload innan du tolkar den i din egen kod.
Hitta ett specifikt värde (ett ID, ett felmeddelande, en tidsstämpel) begravt någonstans inuti ett stort JSON-dokument.

Vanliga frågor

Hur skiljer sig detta från JSON-formateraren?

JSON-formateraren skriver om JSON-text med indentering, minifierar den, eller validerar syntax — den arbetar med själva texten. JSON-trädvisaren renderar den tolkade strukturen som ett interaktivt, hopfällbart träd du kan klicka igenom och söka i — den är byggd för att utforska och förstå formen på stor eller djupt nästlad data, inte för att producera formaterad textutdata.

Kommer detta att frysa min webbläsare på en enorm JSON-fil?

Nej. Trädet renderas lat: bara de första nivåerna byggs vid första renderingen, och allt djupare byggs bara i det ögonblick du klickar för att expandera det. Detta håller den initiala renderingen snabb även för filer på flera megabyte, eftersom webbläsaren aldrig behöver bygga en DOM-nod för data du inte har tittat på än.

Laddas min JSON-data upp någonstans?

Nej. Tolkning, rendering och sökning sker allt lokalt i din webbläsare med JavaScript. Din data lämnar aldrig din enhet.

Hur fungerar sökningen?

Sökningen kontrollerar varje nyckelnamn och varje primitivt värde i hela den tolkade datan, inte bara det som råkar synas på skärmen. När den hittar en träff expanderar den automatiskt varje förfader-nod så att du kan se den, skrollar sedan till den och markerar den kortvarigt. Om det finns flera träffar, använd nästa/föregående-knapparna för att stega genom dem.

Kan jag söka inuti hopfällda noder?

Ja. Sökningen går alltid igenom hela det underliggande JSON-objektet, oavsett vilka noder som för närvarande är expanderade eller hopfällda i vyn. Att fälla ihop en nod påverkar bara vad som visas på skärmen, inte vad som kan hittas.

JSON-trädvisare