JSON-trädvisare
Utforska och redigera JSON i ett hopfällbart träd
JSON-indata
JSON-filer upp till 25 MiB
Reparationer kan ändra felaktiga data. Granska den ändrade indatan innan du exporterar.
Tolkarens detaljer
JSON-visare
Ange giltig JSON för att se dess struktur.
Trädet visar en sida med synliga noder. Alla data finns kvar i trädet och i fullständiga exporter.
Ange giltig JSON för att se dess struktur.
JSON-statistik
- Objektnycklar
- 0
- Totalt antal värden
- 0
- Objekt
- 0
- Arrayer
- 0
- Strängar
- 0
- Tal
- 0
- Booleska värden
- 0
- Nullvärden
- 0
- Maximalt djup
- 0
- UTF-8-byte
- 0
Så använder du visaren
Ange JSON för att ändra typ, eller vanlig text för att spara en sträng. Enter sparar, Escape avbryter.
- Läs in en fil eller ett exempel för att öppna trädet och fälla ihop indatapanelen. Använd Visa indata för att redigera rå JSON.
- Indatan förblir öppen medan du skriver. Formatering och minifiering ändrar indatan utan att de tolkade data försvinner.
- I trädläge kopierar Kopiera formaterad JSON. I kodläge behåller Kopiera indatans formatering, medan kodförhandsgranskningen och nedladdningarna använder formaterad JSON.
- Nycklar med punkter, citattecken eller namnet root hanteras som bokstavliga nycklar.
- Redigera primitiva värden med pennan, och borttagning kräver bekräftelse. Objekt och arrayer redigerar du via den råa indatan.
- Sökningen matchar nycklar och strängvärden, även strängar i arrayer. Välj en träff för att visa dess exakta plats.
- Tal använder JavaScripts numeriska precision.
Gratis JSON-trädvisare, validerare och redigerare online
Vår JSON-trädvisare förvandlar rå JSON-data till ett interaktivt, hopfällbart träd som gör även djupt nästlade objekt lätta att utforska. Klistra in en JSON-sträng, ladda upp en .json-fil eller dra och släpp en på sidan, så validerar, tolkar och visar verktyget direkt dina data i en lättnavigerad hierarki med färgkodade typer för strängar, tal, booleska värden och null.
Förutom visualisering fungerar verktyget också som en lättviktig JSON-redigerare. Håll muspekaren över ett primitivt värde i trädet så visas knappar för att redigera och ta bort, så att du kan ändra data direkt utan att byta till en separat redigerare. Ändringarna syns omedelbart i den underliggande JSON-koden, som du sedan kan kopiera eller ladda ner. Den inbyggda JSON-valideraren markerar syntaxfel i realtid, och autokorrigeringen rättar vanliga misstag som citattecken som saknas runt nycklar, enkla citattecken och efterföljande kommatecken.
En kraftfull sökfunktion låter dig hitta nycklar och värden i hela strukturen, medan statistikpanelen visar en sammanställning av antal nycklar, objekt, arrayer, strängar, tal, booleska värden, null-värden, maxdjup och storlek i byte. Oavsett om du felsöker ett API-svar, granskar en konfigurationsfil eller analyserar en databasexport håller den här JSON-visaren online arbetsflödet snabbt och dina data privata: allt körs i din webbläsare utan serveruppladdningar.
Viktiga funktioner
- Interaktiv trädvy med knappar för att fälla ut, fälla ihop, fälla ut alla och fälla ihop alla
- JSON-validering i realtid med beskrivande felmeddelanden
- Autokorrigering av vanliga JSON-fel: nycklar utan citattecken, enkla citattecken, efterföljande kommatecken och undefined-värden
- Redigering och borttagning av värden direkt i trädvyn
- Sökning bland nycklar och värden med markerade träffar och visning av sökväg
- Statistikpanel för JSON: antal nycklar, objekt, arrayer, strängar, tal, booleska värden, null-värden, maxdjup och storlek
- Växla mellan formatering (pretty-print) och komprimering av den råa JSON-inmatningen
- Filuppladdning, dra och släpp, kopiering till urklipp och nedladdning som .json
- Växla mellan trädvy och kodvy
- Hopfällbar inmatningspanel för maximalt utrymme åt trädvyn
Så använder du JSON-trädvisaren
- Läs in din JSON: Klistra in JSON i inmatningsfältet, klicka på “Ladda upp” för att välja en .json-fil, dra en fil till inmatningsytan eller klicka på “Läs in exempel” för en demo.
- Validera och tolka: Verktyget validerar din JSON i realtid. Om fel hittas klickar du på “Åtgärda JSON-fel” för att rätta vanliga problem automatiskt.
- Utforska trädet: Klicka på noder för att fälla ut eller ihop dem. Använd “Fäll ut alla” och “Fäll ihop alla” för att navigera i bulk.
- Sök efter data: Skriv ett nyckelnamn eller ett värde i sökfältet för att hitta matchande poster med deras fullständiga sökväg.
- Redigera eller ta bort värden: Använd redigerings- eller borttagningsknapparna bredvid ett primitivt värde. Knapparna finns kvar på pekskärmar, och borttagning kräver bekräftelse.
- Exportera dina data: Klicka på “Kopiera” för att lägga JSON i urklipp, eller på “Ladda ner” för att spara den som en .json-fil.
Användningsområden
- Felsökning av API-svar: Klistra in ett REST- eller GraphQL-svar för att visualisera strukturen och snabbt hitta specifika fält.
- Granskning av konfigurationsfiler: Ladda upp en package.json, tsconfig.json eller någon annan konfigurationsfil för att kontrollera struktur och värden.
- Analys av datastruktur: Använd statistikpanelen för att förstå hur komplex en JSON-nyttolast är: hur djupt den nästlar, hur många nycklar den har och hur stor den är i byte.
- Snabb JSON-redigering: Gör små rättningar i JSON-data utan att öppna en hel utvecklingsmiljö eller textredigerare.
- Felrättning: Åtgärda felformaterad JSON från loggar eller tredjepartskällor med autokorrigeringen innan du bearbetar den i din applikation.
- Granskning av databasexporter: Titta på JSON-exporter från MongoDB, Firebase eller andra dokumentdatabaser i ett läsbart format.
- Undervisning och inlärning: Visualisera nästlade datastrukturer för elever som lär sig om JSON, API:er och datamodellering.
Vanliga frågor
Är verktyget gratis?
Ja, JSON-trädvisaren är helt gratis, utan registrering, reklamspärrar eller användningsgränser. Visa, validera, redigera och exportera JSON så mycket du behöver.
Är mina data säkra?
Ja. All tolkning, validering, redigering och sökning sker helt i din webbläsare. Inga data skickas någonsin till en fjärrserver, så det är säkert att använda med proprietära, interna eller känsliga JSON-data.
Vilka JSON-fel kan autokorrigeringen rätta?
Reparationsfunktionen försöker rätta de ursprungliga felen: nycklar utan citattecken, enkla citattecken, efterföljande kommatecken och undefined-värden. Den försöker behålla den korrigerade inmatningen synlig för granskning. Reparationer kan ändra felformaterade data och garanterar inte den avsedda betydelsen. JSON som redan är giltig förblir oförändrad.
Finns det en storleksgräns för JSON-filer?
Uppladdade och släppta filer kan vara upp till 25 MiB, inklusive en fil som ligger exakt på gränsen. Visaren sidindelar de synliga trädnoderna men behåller hela datamängden för redigering och export. Mycket stor eller djupt nästlad JSON kan ändå kräva mer tid eller minne.
Kan jag redigera nästlade objekt eller arrayer i trädet?
För närvarande går det att redigera och ta bort direkt i trädet för primitiva värden (strängar, tal, booleska värden och null). Om du vill ändra nästlade objekt eller arrayer byter du till inmatningspanelen och redigerar den råa JSON-koden direkt.
Tips och bästa praxis
- Formatera före utforskning: Klicka på “Formatera JSON” för att formatera inmatningen, så blir den råa texten lättare att läsa vid sidan av trädvyn.
- Fäll ihop inmatningspanelen: Dölj inmatningspanelen efter att du läst in JSON, så får trädet maximalt skärmutrymme för djupa hierarkier.
- Använd sökningen för stora filer: I stället för att fälla ut noder manuellt i en stor JSON skriver du en nyckel eller ett värde i sökfältet och hoppar direkt till träffarna.
- Kolla statistiken för snabba granskningar: Använd “Visa statistik” för en snabb överblick av datans komplexitet innan du går in på enskilda noder.
- Dra och släpp för bekvämlighet: Dra en .json-fil direkt från filhanteraren till inmatningsytan för det snabbaste sättet att läsa in data.
- Ladda ner efter ändringar: Efter att ha gjort ändringar direkt i trädet klickar du på “Ladda ner” för att spara den ändrade JSON-koden som en ny fil i stället för att skriva över originalet.