JSON Formatterer: Forskjønn & Valider JSON Online Gratis

Q: Hva er forskjellen mellom JSON.parse() og JSON.stringify()?

JSON.parse() gjør en JSON-streng om til en JavaScript-verdi. JSON.stringify() gjør det motsatte: den gjør en JavaScript-verdi om til en JSON-streng og tar imot et innrykksargument for pen formatering. Dette verktøyet bruker ingen av funksjonene internt, og kan derfor bevare store heltall nøyaktig.

Hva er en JSON-formaterer?

En JSON-formaterer er et verktøy som tar JSON-tekst (JavaScript Object Notation) og skriver den om med innrykk og linjeskift uten å endre selve dataene. JSON er et ren tekst-format for lagring og sending av strukturerte data, bygget opp av navn/verdi-par og lister. Programmer sparer vanligvis plass ved å fjerne all overflødig blanktegn, noe som gir én tettpakket linje som er vanskelig å lese for mennesker. En formaterer, også kalt en forskjønner eller pretty printer, legger til disse blanktegnene igjen på en konsekvent måte slik at strukturen blir synlig. Dette verktøyet formaterer JSON automatisk mens teksten skrives inn eller limes inn. Det finnes ingen formateringsknapp; resultatet oppdateres ved hvert tastetrykk. En tilbakestillingsknapp tømmer inndataene, og en kopieringsknapp kopierer det formaterte resultatet.

Regler for JSON-syntaks

JSON er definert i en spesifikasjon kalt RFC 8259. Den har to beholdertyper:

Objekter inneholder navn/verdi-par innenfor krøllparenteser:

1{"name": "John", "age": 30, "city": "New York"}
2

Matriser inneholder ordnede lister i hakeparenteser:

1["apple", "banana", "cherry"]
2

En verdi i JSON må være én av seks typer: en streng, et tall, en boolsk verdi (true eller false), null, et objekt eller en matrise.

Noen få regler fører til de fleste feilene:

Egenskapsnavn må stå i doble anførselstegn. {name: "John"} er ugyldig; det må være {"name": "John"}.
Strenger må bruke doble anførselstegn, ikke enkle anførselstegn.
Et komma kan ikke stå etter det siste elementet i et objekt eller en matrise (ingen avsluttende komma).
JSON har ingen syntaks for kommentarer, selv om utseendet med krøllparenteser og hakeparenteser stammer fra JavaScript.
JSON har ingen undefined. Bruk null for en manglende verdi.

En vanlig feil er å lime inn en JavaScript-objektliteral i stedet for JSON. {name: 'John', age: undefined} er gyldig JavaScript, men ikke gyldig JSON. JSON-versjonen er {"name": "John", "age": null}.

Slik fungerer denne JSON-formatereren

Mange JSON-formaterere sender teksten gjennom JSON.parse() for å bygge et JavaScript-objekt, og kjører deretter JSON.stringify() for å gjøre den om til tekst igjen med mellomrom. Denne rundturen har en bieffekt: JavaScript-tall er IEEE 754 flyttall med dobbel presisjon, som ikke kan representere alle heltall nøyaktig når de overskrider 2^53 − 1 (9,007,199,254,740,991). En ID som 9007199254740993 kan derfor komme ut som 9007199254740992 etter rundturen.

Dette verktøyet unngår dette trinnet. Det leser inndataene tegn for tegn med en liten, håndskrevet parser, og i stedet for å konvertere hvert tall eller hver streng til en JavaScript-verdi kopierer det tekstbiten nøyaktig slik den er skrevet, før den plasseres på riktig innrykksnivå. Ettersom tall aldri konverteres til flyttall, beholder heltall av enhver størrelse sifrene nøyaktig. Hvis et objekt har samme nøkkel skrevet to ganger, beholdes begge forekomstene på plass i stedet for at de slås sammen til den siste, slik bygging av et JavaScript-objekt ville gjort.

Prosessen, trinn for trinn:

Les neste token (et objekt, en matrise, en streng, et tall, true, false eller null).
Kontroller det mot JSON-grammatikken. Avvis det hvis det bryter en regel, for eksempel en nøkkel uten anførselstegn eller et avsluttende komma.
Kopier tokenets tekst uendret til resultatet.
Legg til et linjeskift og et innrykk på 2 mellomrom for hvert nestingsnivå i et objekt eller en matrise. Et objekt eller en matrise som ikke inneholder noe, forblir på én linje, som {} eller [].
Gjenta til hele inndataene er lest.

Innrykket er fast på 2 mellomrom; det finnes ingen innstilling for å endre det. Når inndatafeltet er tomt, viser resultatpanelet plassholderteksten «Formatted JSON will appear here automatically...». Hvis inndataene bryter en JSON-regel, viser verktøyet meldingen «Invalid JSON: Please check your input» i stedet for en teknisk parser-melding med den nøyaktige tegnposisjonen. Nettlesernes innebygde JSON.parse() rapporterer derimot en tegnposisjon i feilmeldingen.

Regneeksempel

Denne minifiserte inndataen:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

blir til:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Hvert nøstede objekt eller hver nøstede matrise får ett innrykksnivå mer enn forelderen, slik at forholdet mellom address og de tre feltene blir synlig ved første øyekast.

Et annet eksempel viser hvorfor det er viktig å kopiere litteraler. Denne inndataen:

1{"id":9007199254740993}
2

formateres til:

1{
2  "id": 9007199254740993
3}
4

Sifrene forblir nøyaktig slik de ble skrevet. En formaterer som bygger på JSON.parse() etterfulgt av JSON.stringify() ville i stedet stilletiende gjort tallet om til 9007199254740992.

Vanlige JSON-feil

Egenskapsnavn uten anførselstegn: {name: "John"}. Løsning: {"name": "John"}.
Avsluttende komma: {"age": 30,}. Løsning: fjern kommaet før den avsluttende krøllparentesen.
Uoverensstemmende parenteser: {"data": [1, 2}. Løsning: lukk matrisen med ] før objektet lukkes.
Uavsluttet streng: {"name": "John}. Løsning: legg til det manglende avsluttende anførselstegnet.
Enkle anførselstegn: {'name': 'John'}. Løsning: bruk doble anførselstegn.
undefined, NaN eller Infinity: Ingen av disse er gyldige JSON-verdier. Bruk null eller en streng.

En hyppig kilde til disse feilene er å kopiere et objekt direkte fra en nettleserkonsoll eller en serverlogg, som ofte inneholder JavaScript-spesifikk syntaks som må ryddes opp før den blir gyldig JSON.

Når bør en JSON-formaterer brukes?

JSON-formaterere brukes oftest til å undersøke API-svar, som vanligvis sendes minifisert for å spare båndbredde. De brukes også til å kontrollere konfigurasjonsfiler som package.json eller composer.json manuelt, lese data som er kopiert fra en nettlesers lokale lagring eller konsoll, og forstå strukturen til et datasett som er mottatt fra et annet system.

Andre måter å formatere JSON på

Nettleserens utviklerverktøy: Chrome, Edge og Firefox formaterer JSON-svar automatisk i forhåndsvisningsruten i fanen Network.
Kodeeditorer: Visual Studio Code formaterer en åpen JSON-fil med Alt+Shift+F (Shift+Option+F på Mac). De fleste editorer har en tilsvarende snarvei eller en utvidelse for formatering.
Kommandolinjen: jq (jq . file.json) og Pythons innebygde python -m json.tool file.json formaterer begge JSON fra en terminal.

Å bygge JSON-formatering inn i kode

De fleste programmeringsspråk har et JSON-bibliotek med et alternativ for innrykk. I JavaScript:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

I Python:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Begge fremgangsmåtene analyserer teksten til en innebygd datastruktur og serialiserer den deretter på nytt med mellomrom. Det er enkelt å skrive, men kan endre tallene. JavaScript lagrer alle tall som doble flyttall, så 9007199254740993 kommer tilbake som 9007199254740992. Python beholder heltall nøyaktig, fordi Python-heltall ikke har noen størrelsesgrense, men skriver likevel om 1.0e2 til 100.0 og gjør 1e999 om til Infinity, som ikke er gyldig JSON. Programmer som trenger store heltall nøyaktig, for eksempel database-ID-er, lagrer dem ofte som strenger i JSON i stedet for som tall.

En kort historie om JSON

Douglas Crockford spesifiserte JSON tidlig på 2000-tallet, med syntaks hentet fra JavaScript-objektliteraler, men gjorde formatet brukbart fra alle programmeringsspråk. RFC 4627 formaliserte det i 2006. Det spredte seg raskt fordi det var kortere å skrive enn XML og representerte JavaScript-objekter direkte, noe som fikk betydning da webapplikasjoner begynte å hente data i bakgrunnen i stedet for å laste inn hele sider på nytt. På 2010-tallet hadde det blitt standardformatet for REST-API-er og databaser som MongoDB.

Ofte stilte spørsmål

Hva er en JSON-formaterer? Et verktøy som legger til innrykk, linjeskift og mellomrom i JSON-tekst slik at strukturen blir lett å lese, uten å endre dataene.

Endrer formatering dataene? Nei. Formateringen endrer bare blanktegn. Dette verktøyet kopierer hver streng og hvert tall nøyaktig slik det ble skrevet, så verdiene i resultatet samsvarer helt med inndataene, også tall som er for store til å lagres nøyaktig som et JavaScript-tall.

Hvorfor får jeg feilen «Invalid JSON»? Inndataene bryter en JSON-regel. Vanlige årsaker er egenskapsnavn uten anførselstegn, et avsluttende komma, enkle anførselstegn, en uavsluttet streng eller en uoverensstemmende parentes. Dette verktøyet viser ikke den nøyaktige tegnposisjonen til problemet; ved å kontrollere inndataene mot reglene ovenfor finner man det vanligvis raskt.

Kan JSON ha kommentarer? Nei. Spesifikasjonen tillater ikke kommentarer. Formater som JSONC og JSON5 legger til støtte for kommentarer oppå JSON-syntaksen når dette er nyttig, for eksempel i konfigurasjonsfiler.

Hva er standardinnrykket i JSON? To mellomrom er den vanligste konvensjonen innen webutvikling, og det er dette verktøyet bruker. Noen stilveiledninger bruker i stedet fire mellomrom eller tabulatorer; selve JSON-spesifikasjonen krever ikke et bestemt innrykk.

Hva er forskjellen mellom JSON.parse() og JSON.stringify()? JSON.parse() gjør en JSON-streng om til en JavaScript-verdi. JSON.stringify() gjør det motsatte: den gjør en JavaScript-verdi om til en JSON-streng og tar imot et innrykksargument for pen formatering. Dette verktøyet bruker ingen av funksjonene internt, og kan derfor bevare store heltall nøyaktig.

JSON Formatterer: Forskjønn & Valider JSON Online Gratis