Vad är JSON Viewer?
Rå JSON är bra för maskiner och hemsk för ögonen. Fem nivåer klammerparenteser, släpande kommatecken, en enda lång rad — du känner igen det. JSON Viewer gör om det till något du faktiskt kan bläddra i: varje array blir en rad, varje objekt blir en uppsättning kolumner och nästlade strukturer blir tabeller inuti tabeller som du kan borra ner i.
Den är byggd för stunden när du bara vill SE datan. Inte parsa, inte validera, inte konvertera — se. Släpp in ett fetch-svar, en GraphQL-payload, en loggrad, vad som helst. Viewern lägger ut det så att du på en blick kan se om API:et returnerade det du väntade dig och om formen matchar det din kod vill ha.
Allt körs i webbläsaren — ingen uppladdning, inget konto, ingen gräns på hur många klistra-och-titta-rundor du kör på en eftermiddag.
Så här visar du JSON här
Tre steg till en strukturerad vy av datan. Knapparna under editorn matchar det du läser här.
Klistra in eller ladda ett exempel
Kopiera JSON från din API-klient (Postman, Insomnia, fliken Network i webbläsarens DevTools) och klistra in till vänster. Vill du först se viewern i arbete, klicka på Exempel för att ladda en liten datamängd.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Om din JSON är trasig får du ett meddelande direkt under editorn som pekar på var parsern gav upp.
Bläddra i strukturen
Den högra sidan ritar om sig direkt när din input ändras. Arrayer av objekt dyker upp som rader med kolumner för varje nyckel. Nästlade objekt och arrayer blir egna mini-tabeller inuti cellen, så du kan följa en kedja som order.customer.tier visuellt. Använd Huvud eller Nästlad för att vända orienteringen när en post har fler nycklar än rader — ibland är det lättare att läsa nycklar som rader och värden som kolumner. Layouten följer JSON-typerna som definieras i RFC 8259.
Begränsa det du tittar på
Varje kolumn har en filterruta. Skriv gold i tier-kolumnen, SKU-1 i en SKU-kolumn, pending i en statuskolumn — rader som inte matchar göms. Filter är skiftlägesokänsliga och staplas (tier=gold OCH status=paid). Om en kolumn skräpar i vyn, klicka Redigera och sedan ta bort-ikonen (×) i rubriken för att släppa den.
Gå till helskärm för bred data
För datamängder med 20+ kolumner, tryck Helskärm. Tabellen expanderar till hela fönstret så att du kan scrolla horisontellt utan sidopanelen i vägen. Bra för att felsöka en tjock GraphQL-query eller en denormaliserad rapport.
Dela eller exportera när du är klar
Hittade något värt att flagga? Tryck Dela för att skapa en kort länk (1 timme, 1 dag eller 1 vecka) och skicka till en kollega — de öppnar samma vy, samma JSON, inget omklistrande. Eller klicka Excel för att ladda ner tabellen som .xls för Excel, Google Kalkylark eller LibreOffice. Parsning sker på klientsidan via JSON.parse().
När viewern lönar sig
Snabbkoll på API-svar
Du träffar en endpoint i Postman, får tillbaka 8 KB JSON och behöver veta om ett nästlat fält shipping.address.country är ifyllt. Klistra in svaret här och du har svaret på två sekunder. Ingen mental JSON-parsning krävs.
Läsa loggströmmar
Strukturerade loggar från <a href="https://www.elastic.co/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch eller någon JSON-line-logger landar som enradskluster. Släpp in en här och se tidsstämpel, service, level, meddelande och trace-id tydligt upplagda — användbart när du följer en spretig tjänst klockan 02.
Granska schema-exempel
Tittar du på exempelpayloads i en <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a>-spec eller ett teams README? Klistra in exempelblocket och gå igenom formen fält för fält. Snabbare än att läsa indenterad JSON uppifrån och ned, och du ser valfria/saknade fält direkt.
Visa data för intressenter
Din PM vill veta vad checkout-API:et returnerar, men "här är ett JSON-blob" går inte hem. Skapa en delningslänk, klistra in i Slack och de ser en ordentlig tabell — inget behov av att förklara klamrar och kolon.
Vanliga frågor
Vad skiljer en JSON viewer från en JSON parser?
De överlappar kraftigt, men vinklingen är olika. En parser fokuserar på själva akten att göra JSON-text till en användbar struktur (och att flagga trasig syntax). En viewer fokuserar på resultatet — hur det parsade blir presenterat så att du kan läsa det. Det här verktyget gör bådadera under huven, men UI:t är trimmat för att bläddra i stora eller djupt nästlade data snarare än att bara validera.
Lämnar mina data webbläsaren?
Nej. Parsning och rendering sker lokalt med JavaScript. Datan lämnar bara om du klickar "Dela" för att skapa en kort länk, och även då styr du när den löper ut (1 timme till 1 vecka). Om du tittar på något känsligt, låt bli att dela — stäng fliken och det är borta.
Hur djupt får nästlingen gå?
Ingen hård gräns. Viewern renderar rekursivt nästlade arrayer och objekt så djupt du än kastar på den. Djupa strukturer blir visuellt stökiga vid någon punkt — fem eller sex nivåer in lönar det sig att använda filterraden för att fokusera på den gren du faktiskt bryr dig om, eller vända nästlad orientering med Nästlad-knappen.
Funkar det för arrayer av primitiver, inte bara objekt?
Ja. En array som ["read", "write", "admin"] renderas som en enkelkolumns-lista. Blandade arrayer (objekt + primitiver) funkar också — varje element får en egen rad och viewern räknar ut kolumnuppsättningen från vilka nycklar som finns i objekten.
Varför är vissa kolumner borta efter att jag uppdaterat JSON-en?
Om du tog bort kolumner tidigare (via ×-ikonen i redigeringsläge) kommer viewern ihåg det för den aktuella sessionen och döljer motsvarande nycklar från JSON-en också. Att klistra in ny JSON kör om detekteringen. Om en kolumn du väntar dig saknas, kolla om redigeringsläget släppt den, eller om nyckeln faktiskt finns i varje post.
Hur stor JSON-fil är bekväm?
Filer upp till några MB renderar snabbt. Över 5 MB märker du att webbläsaren jobbar. Över 10 MB börjar det bli trögt men viewern klarar det ändå — om du rutinmässigt jobbar med 50 MB+-dataset, ta ett CLI-verktyg som jq eller gron först och klistra in den relevanta biten här.
Relaterade JSON-verktyg
Att visa är en skiva av vad du kan vilja göra med JSON. Behöver du något mer specifikt, pröva dessa: