Hva er JSON Viewer?
Rå JSON er flott for maskiner og forferdelig for øynene. Fem nivåer krøllparenteser, hengende komma, én lang linje — du kjenner det igjen. JSON Viewer gjør det om til noe du faktisk kan bla i: hver array blir en rad, hvert objekt blir et sett med kolonner, og nestede strukturer blir tabeller-i-tabeller du kan bore ned i.
Den er laget for øyeblikket når du bare vil SE dataene. Ikke parse dem, ikke validere dem, ikke konvertere dem — se dem. Slipp inn et fetch-svar, en GraphQL-payload, en loglinje, hva som helst. Vieweren legger det ut slik at du med én gang ser om API-et returnerte det du ventet deg, og om formen matcher det koden din vil ha.
Alt kjøres i nettleseren — ingen opplasting, ingen konto, ingen grenser for hvor mange lim-inn-og-se-runder du brenner gjennom på én ettermiddag.
Slik viser du JSON her
Tre trinn til en strukturert visning av dataene dine. Knappene under editoren matcher det du leser her.
Lim inn eller last inn et eksempel
Kopier JSON fra API-klienten din (Postman, Insomnia, Network-fanen i nettleserens DevTools) og lim inn til venstre. Vil du først se vieweren i bruk, trykk Eksempel for å laste inn et lite datasett.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Hvis JSON-en din er ødelagt, får du en melding rett under editoren som peker på hvor parseren ga opp.
Bla i strukturen
Høyre side tegner seg om med én gang input endrer seg. Arrayer av objekter dukker opp som rader med kolonner for hver nøkkel. Nestede objekter og arrayer blir egne minitabeller inne i cellen, så du kan følge en kjede som order.customer.tier visuelt. Bruk Hoved eller Nestet for å snu orienteringen når en post har flere nøkler enn rader — noen ganger er det lettere å lese nøkler som rader og verdier som kolonner. Oppsettet følger JSON-typene definert i RFC 8259.
Snevre inn det du ser på
Hver kolonne har en filterboks. Skriv gold i tier-kolonnen, SKU-1 i en SKU-kolonne, pending i en statuskolonne — rader som ikke matcher, skjules. Filtre er case-ufølsomme og stables (tier=gold OG status=paid). Hvis en kolonne roter til visningen, klikk Rediger og deretter fjern-ikonet (×) på overskriften for å droppe den.
Gå i fullskjerm for bred data
For datasett med 20+ kolonner, trykk Fullskjerm. Tabellen utvides til hele vinduet så du kan skrolle horisontalt uten sidepanelet i veien. Bra for å feilsøke en fet GraphQL-spørring eller en denormalisert rapport.
Del eller eksporter når du er ferdig
Fant du noe verdt å flagge? Trykk Del for å lage en kort lenke (1 time, 1 dag eller 1 uke) og send til en kollega — de åpner samme visning, samme JSON, uten å lime inn på nytt. Eller klikk Excel for å laste ned tabellen som .xls for Excel, Google Regneark eller LibreOffice. Parsingen skjer på klientsiden via JSON.parse().
Når vieweren virkelig lønner seg
Rask titt på API-svar
Du treffer et endepunkt i Postman, får tilbake 8 KB JSON og må vite om et nestet shipping.address.country-felt er fylt ut. Lim inn svaret her og du har svaret på to sekunder. Ingen mental JSON-parsing nødvendig.
Lese logstrømmer
Strukturerte logger fra <a href="https://www.elastic.co/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch eller en hvilken som helst JSON-line-logger lander som enkeltlinje-blobber. Slipp en inn her for å se timestamp, service, level, melding og trace-id tydelig lagt ut — nyttig når du følger en vinglete tjeneste klokka 02 på natta.
Gå gjennom skjema-eksempler
Ser du på eksempel-payloads i en <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a>-spec eller et teams README? Lim inn eksempelblokken og gå gjennom formen felt for felt. Raskere enn å lese innrykket JSON ovenfra og ned, og du ser valgfrie/manglende felter med det samme.
Vise data til interessenter
PM-en din vil vite hva checkout-API-et returnerer, men "her er en JSON-blob" duger ikke. Lag en delingslenke, lim inn på Slack, så ser de en ordentlig tabell — ingen forklaring av parenteser og kolon.
FAQ
Hva er forskjellen på en JSON viewer og en JSON parser?
De overlapper mye, men vinklingen er ulik. En parser fokuserer på selve det å gjøre JSON-tekst om til en brukbar struktur (og flagge dårlig syntaks). En viewer fokuserer på outputet — hvordan det parsede resultatet presenteres så du kan lese det. Dette verktøyet gjør begge deler under panseret, men UI-et er tilpasset bla i store eller dypt nestede data heller enn å bare validere dem.
Forlater dataene mine nettleseren?
Nei. Parsing og rendering skjer lokalt med JavaScript. Data forlater bare nettleseren hvis du klikker "Del" for å lage en kort lenke, og selv da styrer du utløpet (1 time til 1 uke). Ser du på noe sensitivt, la være å dele — lukk fanen og det er borte.
Hvor dypt kan nestingen gå?
Ingen hard grense. Vieweren renderer rekursivt nestede arrayer og objekter så dypt du kaster på den. Dype strukturer blir visuelt travle på et tidspunkt — fem-seks nivåer ned lønner det seg å bruke filterraden for å fokusere på den grenen du faktisk bryr deg om, eller snu nestet orientering med Nestet-knappen.
Kan jeg også se arrayer av primitiver, ikke bare objekter?
Ja. En array som ["read", "write", "admin"] rendres som en enkelt-kolonneliste. Blandede arrayer (objekter + primitiver) fungerer også — hvert element får sin egen rad, og vieweren regner ut kolonnesettet fra hvilke nøkler som finnes på tvers av objektene.
Hvorfor er noen kolonner borte etter at jeg oppdaterte JSON-en?
Hvis du fjernet kolonner tidligere (via ×-ikonet i redigeringsmodus), husker vieweren det for den aktive økten og skjuler de underliggende nøklene fra JSON-en også. Å lime inn ny JSON kjører deteksjonen på nytt. Hvis en kolonne du forventer mangler, sjekk om redigeringsmodus droppet den, eller om nøkkelen faktisk finnes i hver post.
Hvor stor JSON-fil er komfortabel?
Filer opp til et par MB rendres kjapt. Over 5 MB merker du at nettleseren jobber. Over 10 MB blir det tregt, men vieweren takler det likevel — jobber du rutinemessig med 50 MB+ datasett, så ta et CLI-verktøy som jq eller gron først og lim inn den relevante biten her.
Relaterte JSON-verktøy
Å vise er én del av det du kanskje vil gjøre med JSON. Trenger du noe mer spesifikt, prøv disse: