Jak opravit "Unexpected token" v JSON.parse: průvodce všemi příčinami

SyntaxError: Unexpected token X in JSON at position N je jedna z nejčastějších chyb v JavaScriptu a zároveň jedna z nejméně užitečných — říká vám, kde to parser vzdal, ale ne proč. Tady je návod, jak ji skutečně opravit.

Krok 1: přečtěte si číslo pozice

JSON.parse počítá znaky od začátku řetězce, počínaje 0. Pokud váš JSON pochází z proměnné, nejdřív si vypište přesný výřez kolem dané pozice:

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));
  }
}

Tenhle jediný útržek kódu vyřeší víc těchto chyb než jakékoli rady o syntaxi JSON, protože většina chyb „unexpected token“ jsou ve skutečnosti chyby typu „nevím, co můj řetězec doopravdy obsahuje“ — mezery na konci z copy-paste, nadbytečný nový řádek z template literalu nebo byte-order-mark (BOM) na úplném začátku (pozice 0, token , který je ve většině editorů neviditelný).

7 příčin seřazených podle toho, jak často se skutečně vyskytují

Čárka navíc na konci. {"a": 1, "b": 2,} — platné v JS objektových literálech, neplatné v JSON. Čárka před } nebo ] je jednoznačně nejčastější příčina.
Jednoduché uvozovky místo dvojitých. {'a': 1} je JS, ne JSON. JSON vyžaduje dvojité uvozovky u klíčů i řetězcových hodnot, bez výjimek.
Klíče bez uvozovek. {a: 1} — opět platné v JS, neplatné v JSON. Každý klíč potřebuje uvozovky.
JS hodnota, která není platný JSON. undefined, NaN, funkce nebo komentář (// like this) — nic z toho ve specifikaci JSON neexistuje, jen v JavaScriptu.
Dvojité zakódování. Zavolali jste JSON.stringify() dvakrát, nebo parsujete řetězec, který už je objektem — před voláním .parse() zkontrolujte typeof raw === 'string'.
Prázdný řetězec nebo odpověď undefined. Pokud fetch tiše selhal nebo vrátil prázdné tělo, JSON.parse("") vyhodí Unexpected end of JSON input — jinou, ale příbuznou chybu. Zkontrolujte response.ok a před parsováním si vypište surové tělo odpovědi.
BOM nebo neviditelné znaky z copy-paste. Vložení JSON z PDF, wordového dokumentu nebo výstupu terminálu s sebou může nést BOM nebo nezlomitelnou mezeru, která vypadá stejně jako obyčejný znak.

Nejrychlejší oprava: validujte, než začnete debugovat

Číst surové chybové zprávy znak po znaku je pomalé. Vložte přesný řetězec do formátovače, který neplatný znak přímo zvýrazní, místo abyste hádali podle čísla pozice — z „někde kolem znaku 812“ se stane „tahle konkrétní chybějící závorka, přesně tady“. (Odkaz níže.)

Když je JSON skutečně platný, a přesto selhává

Pokud formátovač potvrdí, že je váš JSON syntakticky správný, a JSON.parse přesto hází chybu, pak řetězec, který předáváte, není tím řetězcem, za který ho máte. Nejčastější důvod: voláte .parse() na objektu Response místo jeho rozbaleného těla.

// 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);

Rychlý přehled

Příznak	Pravděpodobná příčina
`Unexpected token }`	Čárka navíc před uzavírací závorkou
`Unexpected token '`	Jednoduché uvozovky místo dvojitých
`Unexpected token a` (nebo jakékoli písmeno)	Klíč objektu bez uvozovek
`Unexpected end of JSON input`	Prázdný řetězec, oříznutá odpověď nebo neuzavřená závorka
`Unexpected token` (pozice 0)	Byte-order-mark ze zkopírovaného nebo ve Windows uloženého souboru

Nic z toho si nemusíte pamatovat — oprava jsou vždy tytéž tři kroky: vypište si výřez kolem nahlášené pozice, prožeňte ho formátovačem a opravte ten jeden znak, který označí.