Kā novērst "Unexpected token" kļūdu JSON.parse: ceļvedis pa visiem cēloņiem

SyntaxError: Unexpected token X in JSON at position N ir viena no biežākajām kļūdām JavaScript un viena no vismazāk noderīgajām — tā pasaka, kur parsētājs padevās, nevis kāpēc. Lūk, kā to patiešām salabot.

1. solis: izlasiet pozīcijas numuru

JSON.parse skaita rakstzīmes no virknes sākuma, sākot ar 0. Ja jūsu JSON nāk no mainīgā, pirms jebkā cita izvadiet žurnālā precīzu fragmentu ap šo pozīciju:

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 viens fragments atrisina vairāk šādu kļūdu nekā jebkurš padoms par JSON sintaksi, jo vairums “unexpected token” kļūdu patiesībā ir “es nezinu, ko mana virkne īsti satur” kļūdas — atstarpes no kopēšanas-ielīmēšanas, lieka jaunā rindiņa no šablona literāļa vai baitu secības marķieris (BOM) pašā sākumā (pozīcija 0, tokens , kas vairumā redaktoru ir neredzams).

7 cēloņi, sarindoti pēc tā, cik bieži tie patiešām notiek

Komats beigās. {"a": 1, "b": 2,} — derīgs JS objektu literāļos, nederīgs JSON. Komats pirms } vai ] ir viens visbiežākais cēlonis.
Vienpēdiņas dubultpēdiņu vietā. {'a': 1} ir JS, nevis JSON. JSON pieprasa dubultpēdiņas gan ap atslēgām, gan ap virkņu vērtībām, bez izņēmumiem.
Atslēgas bez pēdiņām. {a: 1} — atkal derīgs JS, nederīgs JSON. Katrai atslēgai vajadzīgas pēdiņas.
JS vērtība, kas nav derīgs JSON. undefined, NaN, funkcija vai komentārs (// like this) — nekas no tā JSON specifikācijā neeksistē, tikai JavaScript.
Dubulta kodēšana. Jūs izsaucāt JSON.stringify() divreiz, vai arī parsējat virkni, kas jau ir objekts — pirms .parse() izsaukšanas pārbaudiet ar typeof raw === 'string'.
Tukša virkne vai undefined atbilde. Ja fetch klusi neizdevās vai atgrieza tukšu ķermeni, JSON.parse("") met Unexpected end of JSON input — citu, bet saistītu kļūdu. Pirms parsēšanas pārbaudiet response.ok un izvadiet žurnālā neapstrādāto ķermeni.
BOM vai neredzamas rakstzīmes no kopēšanas-ielīmēšanas. Ielīmējot JSON no PDF, Word dokumenta vai kāda termināļa izvada, līdzi var nākt BOM vai nedalāmā atstarpe, kas izskatās identiska parastai rakstzīmei.

Ātrākais labojums: validējiet, pirms atkļūdojat

Neapstrādātu kļūdas ziņojumu lasīšana pa rakstzīmei ir lēna. Ielīmējiet precīzo virkni formatētājā, kas nederīgo rakstzīmi izceļ tieši, tā vietā, lai minētu pēc pozīcijas numura — tas pārvērš “kaut kur ap 812. rakstzīmi” par “tieši šī konkrētā trūkstošā iekava, tepat”. (Saite zemāk.)

Kad JSON patiešām ir derīgs, bet tik un tā neizdodas

Ja formatētājs apstiprina, ka jūsu JSON ir sintaktiski pareizs, bet JSON.parse joprojām met kļūdu, virkne, ko padodat, nav tā, ko domājat. Biežākais iemesls: jūs izsaucat .parse() uz Response objekta, nevis tā atrisinātā ķermeņa.

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

Ātrā uzziņa

Simptoms	Iespējamais cēlonis
`Unexpected token }`	Komats pirms noslēdzošās figūriekavas
`Unexpected token '`	Vienpēdiņas dubultpēdiņu vietā
`Unexpected token a` (vai jebkurš burts)	Objekta atslēga bez pēdiņām
`Unexpected end of JSON input`	Tukša virkne, apcirsta atbilde vai neaizvērta iekava
`Unexpected token` (pozīcija 0)	Baitu secības marķieris no kopēta vai Windows saglabāta faila

Nekas no tā nav jāiegaumē — labojums vienmēr ir tie paši trīs soļi: izvadiet žurnālā fragmentu ap norādīto pozīciju, izlaidiet to caur formatētāju, izlabojiet to vienu rakstzīmi, uz kuru tas norāda.