Opravte "Unexpected token" v JSON.parse: terénny sprievodca všetkými príčinami

SyntaxError: Unexpected token X in JSON at position N je jedna z najbežnejších chýb v JavaScripte a zároveň jedna z najmenej užitočných — hovorí vám, kde to parser vzdal, nie prečo. Tu je návod, ako ju naozaj opraviť.

Krok 1: prečítajte si číslo pozície

JSON.parse počíta znaky od začiatku reťazca, počnúc nulou. Ak váš JSON prišiel z premennej, ešte pred čímkoľvek iným si vypíšte presný výrez okolo danej pozície:

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

Tento jeden útržok kódu vyrieši viac takýchto chýb než akékoľvek rady o syntaxi JSON, pretože väčšina chýb „unexpected token“ sú v skutočnosti chyby typu „neviem, čo môj reťazec naozaj obsahuje“ — medzery na konci z kopírovania, nadbytočný nový riadok z template literalu alebo byte-order-mark (BOM) na úplnom začiatku (pozícia 0, token , ktorý je vo väčšine editorov neviditeľný).

7 príčin, zoradených podľa toho, ako často sa skutočne vyskytujú

Čiarka na konci. {"a": 1, "b": 2,} — platné v JS objektových literáloch, neplatné v JSON. Čiarka pred } alebo ] je vôbec najčastejšia príčina.
Jednoduché úvodzovky namiesto dvojitých. {'a': 1} je JS, nie JSON. JSON vyžaduje dvojité úvodzovky okolo kľúčov aj reťazcových hodnôt, bez výnimky.
Kľúče bez úvodzoviek. {a: 1} — opäť platné v JS, neplatné v JSON. Každý kľúč potrebuje úvodzovky.
JS hodnota, ktorá nie je platný JSON. undefined, NaN, funkcia alebo komentár (// like this) — nič z toho v špecifikácii JSON neexistuje, iba v JavaScripte.
Dvojité kódovanie. Zavolali ste JSON.stringify() dvakrát, alebo parsujete reťazec, ktorý je už objektom — pred volaním .parse() si to overte cez typeof raw === 'string'.
Prázdny reťazec alebo odpoveď undefined. Ak fetch potichu zlyhal alebo vrátil prázdne telo, JSON.parse("") vyhodí Unexpected end of JSON input, čo je iná, ale príbuzná chyba — skontrolujte response.ok a pred parsovaním si vypíšte surové telo odpovede.
BOM alebo neviditeľné znaky z kopírovania. Vloženie JSON-u z PDF, Word dokumentu alebo z výstupu terminálu môže so sebou niesť BOM alebo nezalomiteľnú medzeru, ktorá vyzerá identicky ako bežný znak.

Najrýchlejšia oprava: validujte skôr, než začnete ladiť

Čítať surové chybové hlášky znak po znaku je pomalé. Vložte presný reťazec do formátovača, ktorý neplatný znak priamo zvýrazní, namiesto hádania podľa čísla pozície — mení to „niekde okolo znaku 812“ na „táto konkrétna chýbajúca zátvorka, presne tu“. (Odkaz nižšie.)

Keď je JSON skutočne platný, a napriek tomu zlyháva

Ak formátovač potvrdí, že váš JSON je syntakticky správny, a JSON.parse aj tak hádže chybu, reťazec, ktorý mu podávate, nie je ten, ktorý si myslíte. Najčastejší dôvod: voláte .parse() na objekte Response namiesto jeho rozbaleného tela.

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

Rýchly prehľad

Príznak	Pravdepodobná príčina
`Unexpected token }`	Čiarka na konci pred uzatváracou zátvorkou
`Unexpected token '`	Jednoduché úvodzovky namiesto dvojitých
`Unexpected token a` (alebo ľubovoľné písmeno)	Kľúč objektu bez úvodzoviek
`Unexpected end of JSON input`	Prázdny reťazec, orezaná odpoveď alebo neuzavretá zátvorka
`Unexpected token` (pozícia 0)	Byte-order-mark z kopírovaného alebo vo Windows uloženého súboru

Nič z toho si netreba pamätať — oprava sú vždy tie isté tri kroky: vypíšte si výrez okolo nahlásenej pozície, prežeňte ho formátovačom a opravte ten jeden znak, ktorý označí.