Wat is JSON? Een complete gids voor beginners

Als je ooit een website hebt gebouwd, een API hebt aangeroepen of een package.json-bestand hebt bekeken, ben je al in aanraking gekomen met JSON. Het staat voor JavaScript Object Notation, en het is in feite de universele taal die apps gebruiken om met elkaar te communiceren. Laat je niet misleiden door het "JavaScript" gedeelte — JSON werkt met vrijwel elke programmeertaal.

Laten we het in gewone taal uitleggen, met veel voorbeelden onderweg.

Een korte geschiedenisles

JSON werd begin jaren 2000 gecreëerd door Douglas Crockford. Hij wilde iets eenvoudigers dan XML voor het uitwisselen van data tussen browsers en servers. Het idee sloeg snel aan — JSON werd officieel gestandaardiseerd als ECMA-404 in 2013 en later als RFC 8259 in 2017.

Vandaag gebruikt meer dan 90% van de web-API's JSON. Het gaat nergens heen.

Hoe ziet JSON eruit?

Hier is een simpel voorbeeld — een JSON-object dat een persoon voorstelt:

Best leesbaar, toch? Dat is precies het punt. Laten we de regels bekijken die dit mogelijk maken.

De syntaxregels (ze zijn simpel, beloofd)

Datatypes: JSON geeft je zes bouwstenen om mee te werken: strings (altijd tussen dubbele aanhalingstekens), getallen, booleans (true/false), null, objecten en arrays. Dat is het — geen datums, geen functies, geen speciale types.

Objecten: Dit zijn je sleutel-waardeparen, omsloten door accolades {}. Sleutels moeten strings tussen dubbele aanhalingstekens zijn. Hier is een voorbeeld van een genest object:

Arrays: Geordende lijsten tussen vierkante haken []. Ze kunnen elke mix van types bevatten:

Let op: JSON staat geen komma's aan het einde toe. Dus {"name": "Sam",} zal je parser laten crashen. Dit struikelt veel mensen die van JavaScript komen, waar komma's aan het einde prima zijn.

Waarom ontwikkelaars van JSON houden

Er zijn een paar redenen waarom JSON de dataformaatoorlog heeft gewonnen:

• Het is ontzettend simpel. Vergelijk {"name": "Jo"} met XML's Jo. Minder typen, minder ruis.
• Elke taal ondersteunt het. Python heeft json.loads(), JavaScript heeft JSON.parse(), Go heeft encoding/json — je snapt het idee. Bekijk de MDN JSON-documentatie voor de JavaScript-kant.
• Het is lichtgewicht. JSON-payloads zijn doorgaans 30-50% kleiner dan vergelijkbare XML. Dat maakt uit als je miljoenen API-responses per dag verstuurt.
• Het mapt natuurlijk naar code. Een JSON-object ziet er bijna identiek uit als een Python-dictionary, een JavaScript-object of een Ruby-hash. Geen vertaallaag nodig.

Waar je JSON overal tegenkomt

• Web-API's: Roep bijna elke REST API aan en je krijgt JSON terug. Probeer het zelf — open je browser en bezoek https://api.github.com/users/octocat. Dat is JSON.
• Configuratiebestanden: package.json voor Node.js, tsconfig.json voor TypeScript, settings.json voor VS Code — JSON is overal in ontwikkeltools.
• Databases: MongoDB slaat data op in BSON (binaire JSON). PostgreSQL heeft native JSON-kolomtypen. Zelfs MySQL heeft JSON-ondersteuning toegevoegd.
• Data-uitwisseling: Microservices communiceren bijna altijd met elkaar in JSON via HTTP.

JSON vs XML — De korte versie

XML heeft nog steeds zijn plek (meer daarover in ons XML-artikel), maar voor het meeste webontwikkelingswerk wint JSON op leesbaarheid, bestandsgrootte en parseersnelheid. Het enige gebied waar XML schittert? Documentgerichte data met gemengde inhoud, schema's en transformaties.

Je JSON valideren

Zelfs een klein foutje — een ontbrekende komma, een extra aanhalingsteken of een komma aan het einde — laat JSON-parsing volledig mislukken. Er is geen "gedeeltelijk parsen" met JSON; het werkt of het werkt niet. Daarom zijn tools zoals onze JSON Formatter en JSON Validator zo handig. Plak je JSON erin en je ziet direct of er iets mis is.

Veelgemaakte JSON-fouten (en hoe je ze oplost)

Na jaren werken met JSON zijn dit de fouten die ik steeds weer bij ontwikkelaars zie:

1. Enkele aanhalingstekens in plaats van dubbele. Dit is geldig JavaScript, maar GEEN geldige JSON:

2. Komma's aan het einde. JavaScript staat ze toe, JSON niet:

3. Commentaar. JSON heeft geen commentaarsyntax. Als je commentaar nodig hebt in configuratiebestanden, overweeg dan JSONC (JSON with Comments, ondersteund door VS Code) of schakel over naar YAML.

4. Sleutels zonder aanhalingstekens. In JavaScript kun je {name: "Sarah"} schrijven, maar in JSON moet elke sleutel een string tussen aanhalingstekens zijn: {"name": "Sarah"}.

5. Gebruik van undefined. JavaScript's undefined bestaat niet in JSON. Gebruik in plaats daarvan null.

Werken met JSON in verschillende talen

Een van de grootste sterke punten van JSON is universele taalondersteuning. Zo ziet het parsen en serialiseren eruit in populaire talen:

Merk je op hoe vergelijkbaar de API's zijn? parse/loads om te lezen, stringify/dumps om te schrijven. De meeste talen volgen dit patroon.

JSON-prestatietips

Als je met grote JSON-payloads werkt, begint prestatie belangrijk te worden. Hier zijn een paar praktische tips:

• Minificeer voor productie. Het verwijderen van witruimte uit JSON kan de bestandsgrootte met 10-30% verminderen. Onze JSON Minifier doet dit in één klik.
• Gebruik streaming parsers voor grote bestanden. Als je JSON-bestand honderden megabytes groot is, laad het dan niet helemaal in het geheugen. Bibliotheken zoals JSONStream (Node.js) of ijson (Python) parsen incrementeel.
• Vermijd diep geneste structuren. Elk niveau van nesting voegt parsing-overhead toe. Als je meer dan 4-5 niveaus diep nest, overweeg dan om je datamodel platter te maken.
• Overweeg binaire alternatieven voor extreme gevallen. Voor systemen met zeer hoge doorvoer kunnen formaten zoals MessagePack, BSON of Protocol Buffers 2-5x kleinere payloads en sneller parsen bieden. Maar je verliest de menselijke leesbaarheid, dus het is een afweging.

JSON in API-ontwerp uit de praktijk

Laten we kijken hoe echte API's hun JSON-responses structureren. Hier is een veelvoorkomend patroon voor gepagineerde API-responses:

En hier is een veelvoorkomend foutresponspatroon:

Deze patronen zijn zo gebruikelijk dat je ze in bijna elke goed ontworpen REST API zult zien. Het volgen van conventies als deze maakt je API makkelijker te begrijpen voor andere ontwikkelaars.

JSON-snelreferentie

Hier is een spiekbriefje van alles wat je in een JSON-document kunt zetten:

Probeer het zelf

Klaar om deze kennis in de praktijk te brengen? Hier zijn de tools die je als bladwijzer wilt opslaan:

• JSON Formatter — Plak rommelige JSON en krijg het mooi opgemaakt met juiste inspringing.
• JSON Validator — Controleer snel of je JSON syntactisch geldig is en krijg duidelijke foutmeldingen als dat niet zo is.
• JSON Minifier — Verwijder witruimte uit je JSON voor productie-payloads.

JSON lijkt misschien simpel aan de oppervlakte, maar het beheersen van de eigenaardigheden en best practices zal je talloze uren debugging besparen. Ga nu iets geweldigs bouwen!