Kaip pataisyti „Unexpected token” klaidą JSON.parse: visų priežasčių gidas

SyntaxError: Unexpected token X in JSON at position N yra viena dažniausių ir kartu viena mažiausiai naudingų JavaScript klaidų — ji pasako, kur analizatorius pasidavė, bet ne kodėl. Štai kaip ją iš tikrųjų pataisyti.

1 žingsnis: perskaitykite pozicijos skaičių

JSON.parse simbolius skaičiuoja nuo eilutės pradžios, pradedant nuo 0. Jei jūsų JSON atėjo iš kintamojo, prieš darydami bet ką kita, išsiveskite tikslią atkarpą aplink tą poziciją:

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

Šis vienas fragmentas išsprendžia daugiau tokių klaidų nei bet koks patarimas apie JSON sintaksę, nes dauguma „unexpected token“ klaidų iš tikrųjų yra „nežinau, kas iš tiesų yra mano eilutėje“ klaidos — tarpai gale po kopijavimo, papildoma nauja eilutė iš šabloninės eilutės arba baitų tvarkos žymė (BOM) pačioje pradžioje (pozicija 0, žetonas , kuris daugumoje redaktorių nematomas).

7 priežastys, surikiuotos pagal tai, kaip dažnai jos iš tiesų pasitaiko

1. Kablelis gale. {"a": 1, "b": 2,} — leidžiama JS objektų literaluose, bet negalima JSON. Kablelis prieš } ar ] yra pati dažniausia priežastis.
2. Viengubos kabutės vietoj dvigubų. {'a': 1} yra JS, ne JSON. JSON reikalauja dvigubų kabučių ir raktams, ir eilučių reikšmėms — be išimčių.
3. Raktai be kabučių. {a: 1} — vėlgi, tinka JS, netinka JSON. Kiekvienam raktui reikia kabučių.
4. JS reikšmė, kuri nėra galiojantis JSON. undefined, NaN, funkcija ar komentaras (// like this) — nė vieno iš jų JSON specifikacijoje nėra, tik JavaScript.
5. Dvigubas kodavimas. Du kartus iškvietėte JSON.stringify() arba bandote analizuoti eilutę, kuri jau yra objektas — prieš kviesdami .parse() pasitikrinkite su typeof raw === 'string'.
6. Tuščia eilutė arba undefined atsakymas. Jei fetch tyliai nepavyko arba grąžino tuščią kūną, JSON.parse("") meta Unexpected end of JSON input — kitokią, bet susijusią klaidą. Prieš analizuodami patikrinkite response.ok ir išsiveskite neapdorotą kūną.
7. BOM ar nematomi simboliai iš kopijavimo. Įklijuojant JSON iš PDF, Word dokumento ar terminalo išvesties gali atkeliauti BOM arba nekeliamasis tarpas, atrodantis lygiai taip pat kaip įprastas simbolis.

Greičiausias sprendimas: pirmiausia validuokite, tada derinkite

Skaityti neapdorotus klaidų pranešimus simbolis po simbolio — lėta. Įklijuokite tikslią eilutę į formatavimo įrankį, kuris tiesiogiai paryškina netinkamą simbolį, užuot spėlioję iš pozicijos skaičiaus — jis „kažkur apie 812 simbolį“ paverčia į „štai šis konkretus trūkstamas skliaustas, štai čia“. (Nuoroda žemiau.)

Kai JSON iš tiesų galiojantis, bet vis tiek nepavyksta

Jei formatavimo įrankis patvirtina, kad jūsų JSON sintaksiškai teisingas, o JSON.parse vis tiek meta klaidą, vadinasi, perduodama eilutė nėra ta, kuria ją laikote. Dažniausia priežastis: kviečiate .parse() ant Response objekto, o ne ant jo išspręsto kūno.

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

Greita atmintinė

Simptomas	Tikėtina priežastis
Unexpected token }	Kablelis prieš uždarantį riestinį skliaustą
Unexpected token '	Viengubos kabutės vietoj dvigubų
Unexpected token a (ar bet kokia raidė)	Objekto raktas be kabučių
Unexpected end of JSON input	Tuščia eilutė, nutrūkęs atsakymas arba neuždarytas skliaustas
Unexpected token  (pozicija 0)	Baitų tvarkos žymė iš nukopijuoto ar Windows išsaugoto failo

Nieko iš to nereikia mokytis mintinai — sprendimas visada tie patys trys žingsniai: išsiveskite atkarpą aplink nurodytą poziciją, praleiskite per formatavimo įrankį, pataisykite tą vieną jo pažymėtą simbolį.