JSON Formatter

Inleiding

Een JSON-formatter is een onmisbare tool voor iedereen die met JSON-gegevens werkt — ontwikkelaars, API-testers, gegevensanalisten en technisch schrijvers. Rauwe JSON van API's of configuratiebestanden is vaak geminimaliseerd of slecht ingesprongen, waardoor het moeilijk leesbaar en te debuggen is. De JSON-formatter zet chaotische JSON-invoer direct om in een schone, goed gestructureerde uitvoer met juiste inspringingen en syntaxvalidatie.

In tegenstelling tot commandoregel-tools of browserextensies die installatie vereisen, werkt de Toollect JSON-formatter volledig in uw browser. Elke plakactie wordt direct geanalyseerd, waardoor u onmiddellijk feedback krijgt over de geldigheid en structuur van uw JSON. Omdat er geen gegevens naar externe servers worden verzonden, biedt het zowel snelheid als privacy.

Of u nu een REST API-reactie debugt, configuratiebestanden voorbereidt voor implementatie, of JSON-syntax onderwijst, deze tool biedt de precisie en directheid die u nodig hebt.

Hoe het werkt

De JSON-formatter wordt aangedreven door de native JavaScript-methoden JSON.parse() en JSON.stringify(), dezelfde engine die JSON verwerkt in alle moderne browsers en Node.js.

Parsen

De tool geeft uw invoertekst door aan JSON.parse(). Deze methode leest de tekenreeks en probeert een JavaScript-object of -array in het geheugen te bouwen. De parser is streng — hij volgt exact de ECMA-404 JSON-specificatie en wijst elke afwijking van geldige JSON-syntax af.

Validatie

Als JSON.parse() slaagt, is de invoer geldige JSON. Bij een fout gooit de methode een SyntaxError met een beschrijvend bericht. De tool vangt deze fout op en toont deze in het statusgebied. Veelvoorkomende fouten:

• Unexpected token: Een overtollig teken, een afsluitende komma of een niet tussen aanhalingstekens geplaatste sleutel
• Expected property name: Een ontbrekende komma tussen eigenschappen of verkeerde aanhalingstekens
• Unexpected end of input: De JSON-tekenreeks is afgekapt of heeft niet-gesloten haakjes

Formatteren

Bij geldige JSON geeft de tool het geparseerde object door aan JSON.stringify() met de parameter space=2. Dit geeft de opdracht om:

1. Het object opnieuw te serialiseren als JSON-tekenreeks
2. Regeleinden in te voegen na elke {, }, [, ] en komma
3. Elk nestingniveau in te springen met twee spaties
4. De oorspronkelijke gegevenstypen te behouden

Uitvoer

Het geformatteerde resultaat verschijnt in het uitvoerveld, weergegeven met een monogespatieerd lettertype voor betere leesbaarheid. De uitvoer is alleen-lezen, maar kan met één klik naar het klembord worden gekopieerd.

Gebruik

Het gebruik van de Toollect JSON-formatter vereist geen configuratie of registratie. Volg deze stappen:

1. Open de tool — Open de JSON-formatter pagina in uw browser.

2. Plak de JSON — Kopieer JSON-tekst uit elke bron en plak deze met Ctrl+V (Cmd+V op Mac) in het invoerveld.

3. Bekijk het resultaat — Na het plakken formatteert de tool automatisch en toont het resultaat onmiddellijk.

4. Controleer de status — Bekijk de statusindicator tussen de velden:

   • Een groen bericht bevestigt geldige JSON
   • Een rood foutbericht toont het parserprobleem

5. Kopieer het resultaat — Klik op "Kopiëren" om de geformatteerde JSON naar het klembord te brengen.

6. Begin opnieuw — Klik op "Wissen" om beide velden te legen.

Tutorial

Scenario: U debugt een REST API-reactie en moet de JSON-structuur inspecteren.

1. Open de JSON-formatter.

2. Kopieer de ruwe API-reactie:

{"status":"success","data":{"users":[{"id":1,"name":"Alice","email":"[email protected]","active":true},{"id":2,"name":"Bob","email":"[email protected]","active":false}],"total":2,"page":1},"timestamp":"2026-07-11T10:30:00Z"}

3. Plak en automatisch formatteren:

{
  "status": "success",
  "data": {
    "users": [
      { "id": 1, "name": "Alice", "email": "[email protected]", "active": true },
      { "id": 2, "name": "Bob", "email": "[email protected]", "active": false }
    ],
    "total": 2,
    "page": 1
  },
  "timestamp": "2026-07-11T10:30:00Z"
}

4. Test foutieve JSON:

{"status":"success","data":{"users":[{"id":1,"name":"Alice",}]}}

De tool toont: Invalid JSON: Expected property name or '}' at position...

5. Kopieer en gebruik — Klik op "Kopiëren".

Tips

• Afsluitende komma's: JSON staat geen komma's toe na het laatste element
• Diagnose met aanhalingstekens: Bij twijfel in de formatter plakken
• Valideer API-reacties: Houd de tool open tijdens ontwikkeling
• BOM-tekens: Een schijnbaar geldige string kan onzichtbare Unicode-tekens bevatten
• Vergelijking voor/na: Gebruik de weergave naast elkaar

Alternatieven

Probleemoplossing

Technische specificaties

Prestaties

Technische details

• Validatiemotor: Native JSON.parse() (ECMAScript-specificatie)
• Formatteermotor: Native JSON.stringify() met space=2
• Gebeurtenismodel: Invoer activeert automatische opmaak (300ms debounce)
• Compatibiliteit: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+, Samsung Internet 13+, Opera 67+

Privacy

• Nul gegevensoverdracht: alle verwerking in browsergeheugen
• Geen cookies, localStorage of sessionStorage
• Geen analyse- of trackingscripts
• Offline te gebruiken na eerste lading
• Geen registratie, inloggen of API-sleutels

Functies

• Directe JSON-opmaak en -verfraaiing met automatische inspringing
• Realtime JSON-validatie met gedetailleerde foutmeldingen
• Syntaxisfoutdetectie met automatische plaatsbepaling
• Eén-klik kopiëren van het geformatteerde JSON
• Eén-klik wissen van invoer en uitvoer
• Werkt volledig in de browser — geen gegevens naar servers

Veelgestelde vragen