Fix "Unexpected token" in JSON.parse: een praktijkgids voor elke oorzaak

SyntaxError: Unexpected token X in JSON at position N is een van de meest voorkomende fouten in JavaScript, en een van de minst behulpzame — hij vertelt je waar de parser het opgaf, niet waarom. Zo los je het echt op.

Stap 1: lees het positienummer

JSON.parse telt tekens vanaf het begin van de string, beginnend bij 0. Kwam je JSON uit een variabele, log dan eerst het exacte stukje rond die positie voordat je iets anders doet:

try {
  JSON.parse(raw);
} catch (e) {
  const match = e.message.match(/position (\d+)/);
  if (match) {
    const pos = Number(match[1]);
    console.log(raw.slice(Math.max(0, pos - 20), pos + 20));
  }
}

Dat ene snippet lost meer van deze fouten op dan welk advies over JSON-syntaxis dan ook, want de meeste “unexpected token”-fouten zijn eigenlijk “ik weet niet wat mijn string werkelijk bevat”-fouten — witruimte aan het einde door een copy-paste, een extra newline uit een template literal, of een byte-order-mark (BOM) helemaal aan het begin (positie 0, token , die in de meeste editors onzichtbaar is).

De 7 oorzaken, gerangschikt op hoe vaak ze echt voorkomen

1. Komma aan het einde. {"a": 1, "b": 2,} — geldig in JS-objectliterals, ongeldig in JSON. De komma vóór } of ] is verreweg de meest voorkomende oorzaak.
2. Enkele aanhalingstekens in plaats van dubbele. {'a': 1} is JS, geen JSON. JSON vereist dubbele aanhalingstekens rond zowel keys als stringwaarden, zonder uitzondering.
3. Keys zonder aanhalingstekens. {a: 1} — opnieuw geldig JS, ongeldig JSON. Elke key heeft aanhalingstekens nodig.
4. Een JS-waarde die geen geldige JSON is. undefined, NaN, een functie, of een comment (// like this) — geen van deze bestaat in de JSON-specificatie, alleen in JavaScript.
5. Dubbel encoderen. Je hebt twee keer JSON.stringify() aangeroepen, of je parset een string die al een object is — controleer met typeof raw === 'string' voordat je .parse() aanroept.
6. Een lege string of een undefined-response. Als een fetch stilletjes mislukte of een lege body teruggaf, gooit JSON.parse("") een Unexpected end of JSON input, een andere maar verwante fout — controleer response.ok en log de rauwe body voordat je parset.
7. BOM of onzichtbare tekens door copy-paste. JSON plakken uit een PDF, een Word-document of bepaalde terminaluitvoer kan een BOM of non-breaking space meenemen die er identiek uitziet als een normaal teken.

De snelste fix: valideren voordat je debugt

Rauwe foutmeldingen teken voor teken doorlezen is traag. Plak de exacte string in een formatter die het ongeldige teken direct markeert, in plaats van te gokken op basis van een positienummer — dat verandert “ergens rond teken 812” in “deze specifieke ontbrekende haak, precies hier.” (Link hieronder.)

Als de JSON echt geldig is maar toch faalt

Als een formatter bevestigt dat je JSON syntactisch correct is en JSON.parse alsnog een fout gooit, dan is de string die je doorgeeft niet de string die je denkt dat het is. De meest voorkomende reden: je roept .parse() aan op een Response-object in plaats van op de opgeloste body.

// Wrong — parses "[object Response]", not the body
const data = JSON.parse(await fetch(url));

// Right
const data = await (await fetch(url)).json();
// or, if you need the raw text first:
const text = await (await fetch(url)).text();
const data = JSON.parse(text);

Snelle referentie

Symptoom	Waarschijnlijke oorzaak
Unexpected token }	Komma vóór de sluitende accolade
Unexpected token '	Enkele aanhalingstekens in plaats van dubbele
Unexpected token a (of een andere letter)	Object-key zonder aanhalingstekens
Unexpected end of JSON input	Lege string, afgekapte response, of niet-gesloten haak
Unexpected token  (positie 0)	Byte-order-mark uit een geplakt of onder Windows opgeslagen bestand

Je hoeft hier niets van uit je hoofd te leren — de fix bestaat altijd uit dezelfde drie stappen: log het stukje rond de gemelde positie, haal het door een formatter, en herstel het ene teken dat hij aanwijst.