JSON-träd
Utforska JSON som ett fällbart träd med typmärken, JSON Pointer-sökvägar och sökning
JSON
Träd
Klistra in JSON till vänster och klicka Bygg träd.
JSON-träd
Utforska JSON som ett fällbart träd med typmärken, JSON Pointer-sökvägar och sökning
Funktioner
- Rekursivt fällbart träd: varje objekt- och array-nod har egen expandera/fälla-knapp, roten är expanderad som standard så strukturen är direkt synlig
- Per-nod JSON Pointer (RFC 6901) — sväva över en nyckel för att se hela sökvägen, klicka kedje-ikonen för att kopiera för användning i patchar, diffar eller schema instancePath
- Typmedvetna märken färglägger varje nod efter sin riktiga typ (string / number / boolean / null / array / object) — null gömmer sig inte längre bakom typeof 'object'
- Förhandsvisningskolumnen visar en radsammanfattning: skalärer inline, arrayer som `[ N ]` med antal element, objekt som `{ N }` med antal nycklar — storlek synlig före expansion
- Sökfilter matchar på nyckelnamn, JSON Pointer-sökvägar och förhandsvisningstext; trädet fälls ihop till bara grenar med träff — uppslag i 10 MB-dokument hanterbart
- Kopiera värde-knappen skriver nodens värde till urklipp — strängar som rå text, komplexa typer som pretty-print JSON redo att klistras i annat verktyg
- Tolkningsfel inkluderar JavaScript-motorns fullständiga meddelande (ofta med rad/kolumninfo) så du kan fixa indata i stället för att gissa
- Helt klientsida: indata lämnar aldrig webbläsaren, hela trädet byggs i minne, ingen telemetri, och sidan fungerar offline efter cachning
Så använder du
- Klistra in JSON i vänster textruta eller klicka Ladda exempel för ett litet exempel.
- Tryck Bygg träd. Roten visas expanderad; klicka pilen bredvid en objekt-/array-nod för att gå djupare.
- Använd sökrutan för att filtrera efter nyckelnamn, värde eller JSON Pointer-sökväg — bara matchande grenar förblir synliga.
- Sväva över en nyckel för att se dess JSON Pointer-sökväg i verktygstipset; klicka kedje-ikonen för att kopiera.
- Klicka kopiera-ikonen för att få nodens värde — skalärer rå, objekt/arrayer som pretty-print JSON.
- Använd Expandera alla / Fäll ihop alla för att vända hela trädet på en gång.
Tips och bästa praxis
- Håll Shift nedtryckt när du klickar en växel för att fälla/öppna hela grenar snabbare — när OS-genväg är mappad fortsätter växelknappen att fungera individuellt.
- Sök på ett värde (inte bara nyckel) vid felsökning — förhandsvisningstext är inkluderat i matchningen.
- Kopiera en JSON Pointer härifrån och klistra i felrapporten i JSON Schema Validator för att bekräfta exakt vilken nod som bröt valideringen.
- Om trädet känns långsamt, fäll ihop den största arrayen först — långa arrayer dominerar renderingskostnaden.
- Para ihop med JSON Diff: kopiera ett värde före/efter en ändring för att se den exakta noden-redigeringen.
Vanliga frågor
Vad är en JSON Pointer och hur används den?
En JSON Pointer (RFC 6901) är en snedstrecksseparerad sökväg som namnger exakt en nod i ett JSON-dokument: `/owner/name` är name-fältet på owner-objektet; `/tags/1` är andra elementet i tags-arrayen. Roten är tom sträng (visas här som `/`). Detta verktyg använder samma format som JSON Schema instancePath-fel och verktyg som fast-json-patch, så du kan kopiera en pointer härifrån och använda som direkt referens någon annanstans.
Hur skiljer sig typmärket från JavaScripts typeof?
På två sätt. Först visas null som 'null' (typeof null === 'object' i JavaScript — en gammal bugg). För det andra visas arrayer som 'array' i stället för typeofs 'object', eftersom de renderas och beter sig olika. Detta motsvarar JSON-specens sex värdetyper: string, number, boolean, null, array, object.
Hur fungerar sökningen?
Frågan matchas skiftlägesokänsligt mot nodens nyckel, JSON Pointer-sökväg och förhandsvisningssträng. En gren förblir synlig om den eller någon avkomling matchar — du kan alltså söka efter ett djupt nästlat värde och fortfarande se nycklarna på vägen dit. Töm rutan för att återställa hela trädet.
Klarar det mycket stor JSON?
Bygger hela trädet i minne en gång, så megabyteskala-dokument renderar bekvämt. Hundratals megabyte JSON kan bli trångt på telefoner med lite RAM; för det intervallet föredra streamingverktyg eller kör JSON Minify först för att ta bort whitespace. Rendering är ovirtualiserad — varje synlig nod renderar till ett DOM-element — så att fälla ihop stora grenar är knepet om det känns långsamt.
Förlorar en nod data om den fälls ihop?
Nej. Att fälla ihop är rent visuellt — det underliggande tolkade objektet finns kvar i minne, så att expandera igen visar samma innehåll direkt. Sökning ignorerar fällt-tillstånd och avslöjar träffar i hopfällda noder.
Varför visar förhandsvisningen `{ 0 }` för ett tomt objekt?
Talet inom måsvingar är antal nycklar för objekt och längden för arrayer. Noll-nyckel-objekt och noll-längd-arrayer är giltigt JSON och inte samma värde (`{}` vs `[]`), så att visa räkningen och måsvingarna gör typ och storlek uppenbara vid en blick.
Vad är skillnaden mot trädvyn i JSON Formatter?
JSON Formatters träd är en av många flikar (vid sidan av pretty-print, JSONPath, schemavalidering, transformationer, diff). Detta verktyg är den fristående endast-träd-vyn: en URL, ett jobb, djupare interaktion per nod (typmärken, per-nod-pointer-kopia, per-nod-värdekopia) utan formaterings-/transformations-/valideringsytan.
Skickas något till en server?
Nej. JSON stannar i din webbläsare, parsning och trädbygge körs synkront i samma JavaScript-kontext som renderade sidan, och Nätverk-fliken visar inga förfrågningar vid klick på Bygg träd. Efter första laddningen fungerar sidan offline.