„Unexpected token” hiba a JSON.parse-ban: terepkalauz minden okhoz

A SyntaxError: Unexpected token X in JSON at position N az egyik leggyakoribb hiba JavaScriptben, és az egyik legkevésbé segítőkész — azt mondja meg, hol adta fel a parser, nem azt, hogy miért. Íme, hogyan javítsd ténylegesen.

1. lépés: olvasd le a pozíciószámot

A JSON.parse a karaktereket a string elejétől számolja, 0-tól indulva. Ha a JSON egy változóból jött, mielőtt bármi mást tennél, logold ki a pozíció körüli pontos szeletet:

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

Ez az egy kódrészlet több ilyen hibát old meg, mint bármilyen JSON-szintaxisról szóló tanács, mert a legtöbb „unexpected token“ hiba valójában „nem tudom, mit tartalmaz igazából a stringem“ hiba — másolás-beillesztésből maradt záró szóköz, egy extra sortörés egy template literalból, vagy egy byte-order-mark (BOM) a legelején (pozíció: 0, token: , amely a legtöbb szerkesztőben láthatatlan).

A 7 ok, aszerint rangsorolva, milyen gyakran fordulnak elő valójában

1. Záró vessző. {"a": 1, "b": 2,} — JS objektumliterálban érvényes, JSON-ban érvénytelen. A } vagy ] előtti vessző messze a leggyakoribb ok.
2. Szimpla idézőjel dupla helyett. A {'a': 1} JS, nem JSON. A JSON dupla idézőjelet követel meg a kulcsok és a string-értékek körül is, kivétel nélkül.
3. Idézőjel nélküli kulcsok. {a: 1} — megint csak érvényes JS, érvénytelen JSON. Minden kulcsnak idézőjel kell.
4. Olyan JS-érték, amely nem érvényes JSON. undefined, NaN, függvény vagy komment (// like this) — egyik sem létezik a JSON-specifikációban, csak JavaScriptben.
5. Dupla kódolás. Kétszer hívtad meg a JSON.stringify()-t, vagy olyan stringet parse-olsz, amely már objektum — ellenőrizd typeof raw === 'string' vizsgálattal, mielőtt meghívod a .parse()-t.
6. Üres string vagy undefined válasz. Ha egy fetch csendben elbukott vagy üres törzset adott vissza, a JSON.parse("") az Unexpected end of JSON input hibát dobja — más, de rokon hiba. Ellenőrizd a response.ok értékét, és logold a nyers törzset parse-olás előtt.
7. BOM vagy láthatatlan karakterek másolás-beillesztésből. PDF-ből, Word-dokumentumból vagy egyes terminálkimenetekből beillesztett JSON hordozhat BOM-ot vagy nem törhető szóközt, amely ránézésre azonos egy normál karakterrel.

A leggyorsabb javítás: validálj, mielőtt debugolnál

A nyers hibaüzeneteket karakterenként böngészni lassú. Illeszd be a pontos stringet egy olyan formázóba, amely közvetlenül kiemeli az érvénytelen karaktert, ahelyett hogy egy pozíciószámból találgatnál — a „valahol a 812. karakter környékén“-ből így lesz „pontosan ez a hiányzó zárójel, itt“. (Link lentebb.)

Amikor a JSON tényleg érvényes, mégis hibázik

Ha egy formázó megerősíti, hogy a JSON-od szintaktikailag helyes, de a JSON.parse továbbra is hibát dob, akkor a string, amit átadsz, nem az a string, aminek hiszed. A leggyakoribb ok: a .parse()-t egy Response objektumon hívod meg a feloldott törzse helyett.

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

Gyors áttekintés

Tünet	Valószínű ok
Unexpected token }	Záró vessző a bezáró kapcsos zárójel előtt
Unexpected token '	Szimpla idézőjel dupla helyett
Unexpected token a (vagy bármely betű)	Idézőjel nélküli objektumkulcs
Unexpected end of JSON input	Üres string, csonka válasz vagy lezáratlan zárójel
Unexpected token  (pozíció: 0)	Byte-order-mark másolt vagy Windowson mentett fájlból

Ezekből semmit sem kell memorizálni — a javítás mindig ugyanaz a három lépés: logold ki a jelzett pozíció körüli szeletet, futtasd át egy formázón, és javítsd az egyetlen karaktert, amit megjelöl.