Korjaa "Unexpected token" JSON.parse-virhe: kenttäopas jokaiseen syyhyn

SyntaxError: Unexpected token X in JSON at position N on yksi JavaScriptin yleisimmistä virheistä ja yksi vähiten hyödyllisistä — se kertoo, missä jäsennin luovutti, ei miksi. Näin korjaat sen oikeasti.

Vaihe 1: lue sijaintiluku

JSON.parse laskee merkit merkkijonon alusta nollasta alkaen. Jos JSON tuli muuttujasta, tulosta lokiin tarkka pätkä kyseisen kohdan ympäriltä ennen kuin teet mitään muuta:

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

Tuo yksi pätkä ratkaisee näistä virheistä enemmän kuin mikään JSON-syntaksia koskeva neuvo, koska useimmat “unexpected token” -virheet ovat oikeasti “en tiedä, mitä merkkijononi todella sisältää” -virheitä — kopioinnista jäänyttä välilyöntiä lopussa, ylimääräinen rivinvaihto template literalista tai byte-order-mark (BOM) aivan alussa (position 0, token , joka on näkymätön useimmissa editoreissa).

7 syytä, järjestettynä sen mukaan, kuinka usein ne oikeasti sattuvat

Pilkku lopussa. {"a": 1, "b": 2,} — kelvollinen JS-objektiliteraaleissa, kelvoton JSONissa. Pilkku ennen merkkiä } tai ] on kaikkein yleisin syy.
Yksinkertaiset lainausmerkit kaksinkertaisten sijaan. {'a': 1} on JS:ää, ei JSONia. JSON vaatii kaksinkertaiset lainausmerkit sekä avainten että merkkijonoarvojen ympärille, ei poikkeuksia.
Lainausmerkittömät avaimet. {a: 1} — jälleen kelvollista JS:ää, kelvotonta JSONia. Jokainen avain tarvitsee lainausmerkit.
JS-arvo, joka ei ole kelvollista JSONia. undefined, NaN, funktio tai kommentti (// like this) — mitään näistä ei ole JSON-spesifikaatiossa, vain JavaScriptissä.
Kaksinkertainen enkoodaus. Kutsuit JSON.stringify()-funktiota kahdesti, tai jäsennät merkkijonoa, joka on jo objekti — tarkista typeof raw === 'string' ennen .parse()-kutsua.
Tyhjä merkkijono tai undefined-vastaus. Jos fetch epäonnistui hiljaa tai palautti tyhjän rungon, JSON.parse("") heittää virheen Unexpected end of JSON input — eri mutta sukua oleva virhe. Tarkista response.ok ja tulosta raakarunko lokiin ennen jäsentämistä.
BOM tai näkymättömät merkit kopioinnista. JSONin liittäminen PDF:stä, Word-dokumentista tai jostakin terminaalitulosteesta voi tuoda mukanaan BOMin tai sitovan välilyönnin, joka näyttää identtiseltä tavallisen merkin kanssa.

Nopein korjaus: validoi ennen kuin debuggaat

Raakojen virheilmoitusten lukeminen merkki merkiltä on hidasta. Liitä tarkka merkkijono muotoilijaan, joka korostaa virheellisen merkin suoraan sen sijaan, että arvailisit sijaintiluvusta — se muuttaa “jossain merkin 812 lähellä” muotoon “tämä tietty puuttuva sulje, juuri tässä.” (Linkki alla.)

Kun JSON on aidosti kelvollista mutta epäonnistuu silti

Jos muotoilija vahvistaa, että JSONisi on syntaktisesti oikein ja JSON.parse heittää silti virheen, syöttämäsi merkkijono ei ole se, mitä luulet sen olevan. Yleisin syy: kutsut .parse()-funktiota Response-objektille sen ratkaistun rungon sijaan.

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

Pikaviite

Oire	Todennäköinen syy
`Unexpected token }`	Pilkku ennen sulkevaa aaltosulkua
`Unexpected token '`	Yksinkertaiset lainausmerkit kaksinkertaisten sijaan
`Unexpected token a` (tai mikä tahansa kirjain)	Lainausmerkitön objektin avain
`Unexpected end of JSON input`	Tyhjä merkkijono, katkennut vastaus tai sulkematon sulje
`Unexpected token` (position 0)	Byte-order-mark kopioidusta tai Windowsilla tallennetusta tiedostosta

Mitään näistä ei tarvitse opetella ulkoa — korjaus on aina samat kolme vaihetta: tulosta lokiin pätkä ilmoitetun sijainnin ympäriltä, aja se muotoilijan läpi ja korjaa se yksi merkki, jonka se osoittaa.