Naar inhoud springen
🛠️
Whiz Tools

JSON-opmaker: Verfraai & Valideer JSON Online Gratis

Formatteer geminimaliseerde JSON direct met correcte inspringing. Gratis online JSON-opmaker valideert syntaxis, verfraait code en maakt debuggen sneller. Werkt in-browser met real-time formattering.

JSON-opmaker

Formatteer en verfraai uw JSON met deze eenvoudige tool - formatteren gebeurt automatisch terwijl u typt!

Geformatteerde JSON verschijnt hier automatisch...

Laadcalculator...
📚

Documentatie

Wat is een JSON-formatter?

Een JSON-formatter is een hulpmiddel dat JSON-tekst (JavaScript Object Notation) herschrijft met inspringingen en regeleinden, zonder de gegevens zelf te wijzigen. JSON is een indeling in platte tekst voor het opslaan en verzenden van gestructureerde gegevens, opgebouwd uit naam-waardeparen en lijsten. Programma's besparen doorgaans ruimte door alle extra witruimte te verwijderen, waardoor één dichte regel ontstaat die voor mensen moeilijk te lezen is. Een formatter, ook wel beautifier of pretty printer genoemd, voegt die witruimte op een consistente manier weer toe, zodat de structuur zichtbaar wordt. Dit hulpmiddel formatteert JSON automatisch terwijl de tekst wordt getypt of geplakt. Er is geen opmaakknop; de uitvoer wordt bij elke toetsaanslag bijgewerkt. Een resetknop wist de invoer en een kopieerknop kopieert het geformatteerde resultaat.

JSON-syntaxisregels

JSON wordt gedefinieerd door een specificatie met de naam RFC 8259. JSON heeft twee containertypen:

Objecten bevatten naam-waardeparen tussen accolades:

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

Arrays bevatten geordende lijsten tussen vierkante haken:

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

Een waarde in JSON moet een van zes typen zijn: een tekenreeks, een getal, een booleaanse waarde (true of false), null, een object of een array.

Enkele regels veroorzaken de meeste fouten:

  • Eigenschapsnamen moeten tussen dubbele aanhalingstekens staan. {name: "John"} is ongeldig; het moet {"name": "John"} zijn.
  • Tekenreeksen moeten dubbele aanhalingstekens gebruiken, geen enkele aanhalingstekens.
  • Na het laatste item in een object of array mag geen komma staan (geen afsluitende komma's).
  • JSON heeft geen syntaxis voor opmerkingen, ook al is de vorm met accolades en vierkante haken afkomstig uit JavaScript.
  • JSON kent geen undefined. Gebruik null voor een ontbrekende waarde.

Een veelgemaakte fout is het plakken van een JavaScript-objectliteral in plaats van JSON. {name: 'John', age: undefined} is geldige JavaScript, maar geen geldige JSON. De JSON-versie is {"name": "John", "age": null}.

Hoe deze JSON-formatter werkt

Veel JSON-formatters verwerken de tekst met JSON.parse() om een JavaScript-object op te bouwen en gebruiken daarna JSON.stringify() om het met spatiëring weer in tekst om te zetten. Die heen-en-terugconversie heeft een neveneffect: JavaScript-getallen zijn IEEE-754-zwevendekommagetallen met dubbele precisie, die niet elk geheel getal exact kunnen weergeven zodra ze groter zijn dan 2^53 − 1 (9,007,199,254,740,991). Een ID zoals 9007199254740993 kan na die heen-en-terugconversie verschijnen als 9007199254740992.

Dit hulpmiddel vermijdt die stap. Het leest de invoer teken voor teken met een kleine, handgeschreven parser en kopieert elk getal of elke tekenreeks als tekst precies zoals die is geschreven, in plaats van deze om te zetten in een JavaScript-waarde. Vervolgens plaatst het die tekst op het juiste inspringingsniveau. Omdat getallen nooit in een zwevendekommagetal worden omgezet, behouden gehele getallen van elke omvang hun exacte cijfers. Als in een object dezelfde sleutel tweemaal voorkomt, blijven beide exemplaren op hun plaats staan in plaats van te worden samengevoegd tot het laatste exemplaar, zoals zou gebeuren bij het opbouwen van een JavaScript-object.

Het proces, stap voor stap:

  1. Lees het volgende token (een object, array, tekenreeks, getal, true, false of null).
  2. Controleer het aan de hand van de JSON-grammatica. Wijs het af als het een regel overtreedt, zoals een sleutel zonder aanhalingstekens of een afsluitende komma.
  3. Kopieer de tekst van het token ongewijzigd naar de uitvoer.
  4. Voeg een regeleinde toe en laat voor elk niveau van nesting binnen een object of array inspringen met 2 spaties. Een leeg object of een lege array blijft op één regel staan, als {} of [].
  5. Herhaal dit totdat de volledige invoer is gelezen.

De inspringing is vast ingesteld op 2 spaties; er is geen instelling om dit te wijzigen. Zolang het invoervak leeg is, toont het uitvoerpaneel de tijdelijke tekst "Geformatteerde JSON verschijnt hier automatisch...". Als de invoer een JSON-regel overtreedt, toont het hulpmiddel het bericht "Ongeldige JSON: controleer je invoer" in plaats van een technisch parserbericht met de exacte tekenpositie. De ingebouwde JSON.parse()-functie van browsers meldt daarentegen wel een tekenpositie in de fouttekst.

Uitgewerkt voorbeeld

Deze geminimaliseerde invoer:

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

wordt:

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

Elk genest object of elke geneste array krijgt één inspringingsniveau meer dan het bovenliggende element, zodat de relatie tussen address en de drie velden ervan in één oogopslag zichtbaar is.

Een tweede voorbeeld laat zien waarom het kopiëren van literals van belang is. Deze invoer:

1{"id":9007199254740993}
2

wordt geformatteerd als:

1{
2  "id": 9007199254740993
3}
4

De cijfers blijven precies zoals ze zijn getypt. Een formatter die is gebaseerd op JSON.parse() gevolgd door JSON.stringify() zou dat getal stilzwijgend veranderen in 9007199254740992.

Veelvoorkomende JSON-fouten

  • Eigenschapsnaam zonder aanhalingstekens: {name: "John"}. Oplossing: {"name": "John"}.
  • Afsluitende komma: {"age": 30,}. Oplossing: verwijder de komma vóór de afsluitende accolade.
  • Niet-overeenkomende haakjes: {"data": [1, 2}. Oplossing: sluit de array met ] voordat je het object sluit.
  • Niet-afgesloten tekenreeks: {"name": "John}. Oplossing: voeg het ontbrekende afsluitende aanhalingsteken toe.
  • Enkele aanhalingstekens: {'name': 'John'}. Oplossing: gebruik dubbele aanhalingstekens.
  • undefined, NaN of Infinity: geen van deze waarden is geldige JSON. Gebruik null of een tekenreeks.

Een veelvoorkomende bron van deze fouten is het rechtstreeks kopiëren van een object uit een browserconsole of serverlog, waarin vaak alleen voor JavaScript geldige syntaxis staat die moet worden opgeschoond voordat de tekst geldige JSON is.

Wanneer gebruik je een JSON-formatter?

JSON-formatters worden meestal gebruikt om API-antwoorden te bekijken, die doorgaans geminimaliseerd worden verzonden om bandbreedte te besparen. Ze worden ook gebruikt om configuratiebestanden zoals package.json of composer.json handmatig te controleren, gegevens uit de lokale opslag of console van een browser te lezen en de structuur van een dataset uit een ander systeem te begrijpen.

Andere manieren om JSON te formatteren

  • Ontwikkelaarstools van browsers: Chrome, Edge en Firefox formatteren JSON-antwoorden automatisch in het voorbeeldvenster van het tabblad Network.
  • Code-editors: Visual Studio Code formatteert een geopend JSON-bestand met Alt+Shift+F (Shift+Option+F op een Mac). De meeste editors hebben een gelijkwaardige sneltoets of een extensie voor opmaak.
  • Opdrachtregel: jq (jq . file.json) en Pythons ingebouwde python -m json.tool file.json formatteren beide JSON vanuit een terminal.

JSON-opmaak in code inbouwen

De meeste programmeertalen bevatten een JSON-bibliotheek met een optie voor inspringing. In JavaScript:

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

In Python:

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

Beide benaderingen ontleden de tekst in een interne gegevensstructuur en serialiseren die vervolgens opnieuw met witruimte. Dat is eenvoudig te schrijven, maar het kan de getallen wijzigen. JavaScript slaat elk getal op als een double, waardoor 9007199254740993 terugkomt als 9007199254740992. Python behoudt gehele getallen exact, omdat Python-gehele getallen geen maximale omvang hebben, maar herschrijft 1.0e2 nog steeds als 100.0 en verandert 1e999 in Infinity, wat geen geldige JSON is. Toepassingen die grote gehele getallen exact moeten behouden, zoals database-ID's, slaan deze vaak in JSON op als tekenreeksen in plaats van als getallen.

Een korte geschiedenis van JSON

Douglas Crockford specificeerde JSON aan het begin van de jaren 2000. Hij baseerde de syntaxis op JavaScript-objectliterals, maar maakte JSON bruikbaar vanuit elke programmeertaal. RFC 4627 formaliseerde de indeling in 2006. JSON verspreidde zich snel omdat het korter te schrijven was dan XML en rechtstreeks kon worden omgezet in JavaScript-objecten, wat van belang was toen webtoepassingen op de achtergrond gegevens begonnen op te halen in plaats van volledige pagina's opnieuw te laden. Tegen de 2010s was JSON de standaardindeling voor REST-API's en databases zoals MongoDB geworden.

Veelgestelde vragen

Wat is een JSON-formatter? Een hulpmiddel dat inspringingen, regeleinden en spatiëring aan JSON-tekst toevoegt, zodat de structuur ervan gemakkelijk te lezen is zonder de gegevens te wijzigen.

Wijzigt formatteren de gegevens? Nee. Formatteren wijzigt alleen de witruimte. Dit hulpmiddel kopieert elke tekenreeks en elk getal precies zoals het is getypt, zodat de waarden in de geformatteerde uitvoer exact overeenkomen met de invoer, ook als getallen te groot zijn om exact als JavaScript-getal te worden opgeslagen.

Waarom krijg ik een foutmelding "Ongeldige JSON"? De invoer overtreedt een JSON-regel. Veelvoorkomende oorzaken zijn eigenschapsnamen zonder aanhalingstekens, een afsluitende komma, enkele aanhalingstekens, een niet-afgesloten tekenreeks of niet-overeenkomende haakjes. Dit hulpmiddel toont niet de exacte tekenpositie van het probleem; door de invoer te controleren aan de hand van de hierboven genoemde regels is het meestal snel gevonden.

Kan JSON opmerkingen bevatten? Nee. De specificatie staat ze niet toe. Indelingen zoals JSONC en JSON5 voegen ondersteuning voor opmerkingen toe aan de JSON-syntaxis voor situaties waarin dat nuttig is, zoals configuratiebestanden.

Wat is de standaardinspringing van JSON? Twee spaties vormen de meest gebruikte conventie in webontwikkeling en worden door dit hulpmiddel gebruikt. Sommige stijlgidsen gebruiken in plaats daarvan vier spaties of tabs; de JSON-specificatie zelf vereist geen bepaalde inspringing.

Wat is het verschil tussen JSON.parse() en JSON.stringify()? JSON.parse() zet een JSON-tekenreeks om in een JavaScript-waarde. JSON.stringify() doet het omgekeerde: het zet een JavaScript-waarde om in een JSON-tekenreeks en accepteert een inspringingsargument voor pretty-printing. Dit hulpmiddel gebruikt intern geen van beide functies, waardoor het grote gehele getallen exact kan behouden.

Referenties

  1. RFC 8259 — The JavaScript Object Notation (JSON) Data Interchange Format
  2. MDN Web Docs: JSON
  3. json.org