Popravi "Unexpected token" pri JSON.parse: vodnik skozi vse vzroke

SyntaxError: Unexpected token X in JSON at position N je ena najpogostejših napak v JavaScriptu in hkrati ena najmanj koristnih — pove ti, kje je razčlenjevalnik obupal, ne pa zakaj. Tukaj je, kako to dejansko popraviš.

Korak 1: preberi številko pozicije

JSON.parse šteje znake od začetka niza, začenši z 0. Če je tvoj JSON prišel iz spremenljivke, preden narediš karkoli drugega, izpiši natančen izsek okoli te pozicije:

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

Ta en sam odlomek kode reši več teh napak kot kakršenkoli nasvet o skladnji JSON, ker je večina napak “unexpected token” v resnici napaka tipa “ne vem, kaj moj niz sploh vsebuje” — presledki na koncu po kopiranju in lepljenju, dodaten prehod v novo vrstico iz predloge, ali oznaka vrstnega reda bajtov (BOM) na samem začetku (pozicija 0, žeton , ki je v večini urejevalnikov neviden).

7 vzrokov, razvrščenih po pogostosti

Vejica na koncu. {"a": 1, "b": 2,} — v JS objektnih literalih veljavno, v JSON pa ne. Vejica pred } ali ] je najpogostejši vzrok od vseh.
Enojni narekovaji namesto dvojnih. {'a': 1} je JS, ne JSON. JSON zahteva dvojne narekovaje tako za ključe kot za nizovne vrednosti, brez izjem.
Neoznačeni ključi. {a: 1} — spet, veljavno v JS, neveljavno v JSON. Vsak ključ potrebuje narekovaje.
JS vrednost, ki ni veljaven JSON. undefined, NaN, funkcija ali komentar (// takole) — nič od tega ne obstaja v specifikaciji JSON, le v JavaScriptu.
Dvojno kodiranje. Dvakrat si poklical JSON.stringify(), ali pa razčlenjuješ niz, ki je že objekt — pred klicem .parse() preveri s typeof raw === 'string'.
Prazen niz ali odgovor undefined. Če je fetch tiho spodletel ali vrnil prazno telo, JSON.parse("") vrže Unexpected end of JSON input, drugačno, a sorodno napako — pred razčlenjevanjem preveri response.ok in izpiši surovo telo.
BOM ali nevidni znaki iz kopiranja. Lepljenje JSON iz PDF-ja, Word dokumenta ali izpisa terminala lahko prinese BOM ali nedeljivi presledek, ki je videti popolnoma enak navadnemu znaku.

Najhitrejši popravek: preveri, preden začneš razhroščevati

Branje surovih sporočil o napakah znak za znakom je počasno. Namesto ugibanja iz številke pozicije prilepi natančen niz v formatter, ki neposredno označi neveljavni znak — spremeni “nekje pri znaku 812” v “manjkajoč oklepaj, prav tukaj”. (Povezava spodaj.)

Ko je JSON dejansko veljaven, a še vedno odpove

Če formatter potrdi, da je tvoj JSON skladenjsko pravilen, JSON.parse pa vseeno vrže napako, niz, ki ga posreduješ, ni tisto, kar misliš, da je. Najpogostejši razlog: kličeš .parse() na objektu Response namesto na njegovem razrešenem telesu.

// Narobe — razčleni "[object Response]", ne telesa
const data = JSON.parse(await fetch(url));

// Pravilno
const data = await (await fetch(url)).json();
// ali, če najprej potrebuješ surovo besedilo:
const text = await (await fetch(url)).text();
const data = JSON.parse(text);

Hitri pregled

Simptom	Verjeten vzrok
`Unexpected token }`	Vejica pred zapiralnim zavitim oklepajem
`Unexpected token '`	Uporabljeni enojni narekovaji namesto dvojnih
`Unexpected token a` (ali katerakoli črka)	Neoznačen ključ objekta
`Unexpected end of JSON input`	Prazen niz, prekinjen odgovor ali nezaprt oklepaj
`Unexpected token` (pozicija 0)	Oznaka vrstnega reda bajtov iz kopirane ali v Windows shranjene datoteke

Ničesar od tega ti ni treba na pamet — popravek je vedno enak: tri korake: izpiši izsek okoli sporočene pozicije, ga poženi skozi formatter, popravi tisti en znak, ki ga označi.