Hoekom sê JSON.parse "Unexpected token"?

Dit is JSON.parse Unexpected token-ontfouting: wat die fout beteken, hoe om posisie te lees, en wat om te doen wanneer die liggaam HTML is. Breër dekking van sluitkomma, aanhalingstekens en Unexpected end is in Algemene JSON-foute: sluitkomma, aanhalingstekens en Unexpected token.

Wat beteken “Unexpected token” in JSON.parse()?

JSON.parse() vereis JSON-grammatika. ’n Onwettige karakter by die huidige posisie gooi SyntaxError. {“name”:“Alex”,} is ongeldig: ná daardie komma kan die objek nie eindig nie. Boodskapteks en posisie verskil steeds per looptyd.

Watter fout gooi JSON.parse()?

Ongeldige JSON gooi oor die algemeen SyntaxError. Teken error.name aan om die tipe te bevestig. Moenie die volle error.message hardkodeer nie: enjins en weergawes bewoord dit anders.

try {
  JSON.parse('{"name":"Alex",}');
} catch (error) {
  console.log(error.name);
  // SyntaxError
}

1. Enkelaanhalingstekens in plaas van dubbele aanhalingstekens

{‘name’:‘Alex’} is ongeldige JSON. {“name”:“Alex”} is geldig. JSON-stringe en objekledegname gebruik dubbele aanhalingstekens. ’n JavaScript-objekliteraal soos const user = { name: ‘Alex’ } kan wettige JavaScript wees en tóg nie JSON-teks nie.

Ongeldig

{'name':'Alex'}

Geldig

{"name":"Alex"}

2. Sluitkommas

’n Komma ná die laaste eienskap of skikkingitem is nie geldige standaard-JSON nie. {“name”:“Alex”,“age”:30,} en [1, 2, 3,] faal albei. Behandel dit as een Unexpected token-oorsaak; Algemene JSON-foute: sluitkomma, aanhalingstekens en Unexpected token dek sluitkommas dieper.

Ongeldig

{
  "name": "Alex",
  "age": 30,
}

Geldig

{
  "name": "Alex",
  "age": 30
}

[1, 2, 3,]

3. Eiendomsname sonder aanhalingstekens

{ name: “Alex” } kan ’n JavaScript-objekliteraal wees. In JSON is objekledegname stringe en benodig dubbele aanhalingstekens: {“name”:“Alex”}.

Ongeldig

{
  name: "Alex"
}

Geldig

{
  "name": "Alex"
}

4. Ongeldige string-escape

In JSON-teks begin ’n terugskuinsstreep ’n escape. ’n Rou pad soos C:\Users\Alex is ongeldig omdat \U nie ’n wettige escape is nie. Dubbel die terugskuinsstrepe. Moenie gasheer-taal-string-escape met JSON-escape meng nie. Algemene JSON-foute: sluitkomma, aanhalingstekens en Unexpected token dek dit dieper.

Ongeldig

{"file":"C:\Users\Alex"}

Geldig

{"file":"C:\\Users\\Alex"}

5. Ekstra teks voor of ná die JSON

JSON.parse verwag een JSON-waarde. ’n Voorvoegsel soos Success: voor {“ok”:true}, of ’n agtervoegsel soos done daarna, maak die hele string ongeldig. Onbeduidende spasie rondom ’n enkele JSON-waarde word toegelaat. JSON word nie verbied om spasies voor of ná die waarde te hê nie.

Success:
{"ok":true}

{"ok":true}
done

6. HTML ontleed in plaas van JSON

Om response.json() op ’n HTML-bladsy te roep is ’n algemene Unexpected token-geval. Verkeerde endpoints, 404- of 500-HTML-bladsye, aanmeldomleidings, proksiliggame en terugvalbladsye begin dikwels met merkers. “Unexpected token < beteken altyd HTML” is te sterk: < is ’n wenk, nie bewys nie.

fetch('/api/data')
  .then(response => response.json())

Wat beteken “Unexpected token <” gewoonlik?

JSON-waardes begin nie normaalweg met < nie. As die liggaam met of begin, mag < die eerste onwettige karakter wees. Tydens plaaslike ontfouting, kontroleer die HTTP-status, Content-Type en die rou liggaam. Enjinbewoording verskil steeds.

Kontroleer die antwoord voordat jy dit ontleed

Die fetch-liggaam kan slegs een keer verbruik word. Tydens plaaslike ontfouting, lees eers text(), inspekteer ’n kort voorvoegsel, en JSON.parse dan dieselfde string. Moenie response.json() en dan response.text() op dieselfde antwoord roep nie. Moenie sensitiewe produksieladings by verstek aanteken nie.

const response = await fetch(url);
const text = await response.text();

console.log(response.status);
console.log(response.headers.get("content-type"));
console.log(text.slice(0, 200));

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error);
}

Wat beteken “at position 123”?

Sommige enjins rapporteer ’n posisie, reël of kolom. Soek naby vir ’n slegte aanhalingsteken, komma, hakie of escape. Daardie indeks is waar ontleding ’n probleem opgemerk het; die werklike oorsaak kan vroeër wees. Dit is nie gewaarborg die presiese foutiewe karakter nie.

Unexpected token vs Unexpected end

Unexpected token beteken die ontleder het ’n karakter teëgekom wat hy nie verwag het nie. Unexpected end kan verskyn wanneer die invoer stop voordat die waarde voltooi is, soos in {“name”:“Alex” sonder sluitingshakie. Presiese bewoording is enjinafhanklik. Algemene JSON-foute: sluitkomma, aanhalingstekens en Unexpected token dek onvolledige JSON breër.

{"name":"Alex"

JSON is nie dieselfde as ’n JavaScript-objekliteraal nie

JSON is ’n dataformaat. ’n JavaScript-objekliteraal is JavaScript-sintaks. Die JS-objek met onaanhalde sleutels, enkelaanhalingstekens en ’n sluitkomma is nie geldige JSON-teks nie. JSON.parse kan nie JavaScript-objekliterale veilig ontleed nie.

const data = {
  name: 'Alex',
  active: true,
};

{
  "name": "Alex",
  "active": true
}

Kan JSON opmerkings bevat?

Standaard-JSON ondersteun nie opmerkings nie. ’n // reël binne ’n objek is ongeldig. JSON5 en soortgelyke uitbreidings is ander formate. JSON-formateerder en -vergelyking toets standaard-JSON met JSON.parse en behandel JSON5 nie as JSON nie.

{
  // user name
  "name": "Alex"
}

Is undefined, NaN en Infinity geldige JSON?

Nee. JSON-waardes is objek, skikking, string, getal, true, false en null. undefined, NaN en Infinity is dit nie. ’n Topvlakwaarde hoef nie ’n objek of skikking te wees nie: true, 123, “hello” en null is geldige JSON.

{"a":undefined}
{"a":NaN}
{"a":Infinity}

true
123
"hello"
null

Hoe om ’n Unexpected token-fout stap vir stap reg te maak

Werk die bron, nie die foutstring nie:

1. Bevestig die invoer is werklik JSON, nie HTML, logs of JavaScript nie.
2. Inspekteer die eerste karakters van die rou invoer.
3. As dit van ’n API gekom het, kontroleer HTTP-status en Content-Type. Nóg 200 nóg application/json waarborg geldige JSON.
4. Toets die sintaks in ’n JSON-ontleder.
5. Gebruik enige gerapporteerde posisie, reël of kolom as ’n wenk, nie as die gewaarborgde hoofoorsaak nie.
6. Kontroleer aanhalingstekens, kommas, hakies, vierkante hakies en escapes naby daardie area.
7. Vergelyk met ’n geformateerde, getoetste kopie.
8. Maak die serialiseerder of endpoint reg. Moenie die gerapporteerde teken lukraak skrap nie.

Gebruik JSON.stringify() wanneer jy JSON in JavaScript produseer

Verkies JSON.stringify bo die handmatige aaneenskakeling van stringe. Dit lewer geldige JSON-teks vir die waardes wat dit serialiseer. Dit bewaar nie elke JavaScript-waarde nie: undefined, funksies en simbole het spesiale gedrag. Daardie besonderheid val hier buite die bestek.

const data = {
  name: "Alex",
  active: true
};
const json = JSON.stringify(data);
// {"name":"Alex","active":true}

Ongeldige JSON vs ’n werklike regstelling

Hierdie pare is met JSON.parse nagegaan. Vir HTML is die regstelling die antwoord, nie ’n sintaksredigering nie.

Probleem	Ongeldig	Regstelling
Enkelaanhalingstekens	{'a':1}	{"a":1}
Sluitkomma	{"a":1,}	{"a":1}
Sleutel sonder aanhalingstekens	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
HTML-liggaam	<html>...	Kontroleer die endpoint en rou antwoord. Moenie HTML tot JSON redigeer nie.

’n Eenvoudige Unexpected token-besluitgids

As JSON.parse gefaal het, besluit of jy eers JSON het voordat jy aanhalingstekens herskryf.

• JSON.parse het gefaal
• ↓
• Van 'n API? Kontroleer status, Content-Type en die rou liggaam
• Begin dit met JSON? Indien nie, maak die bron of endpoint reg
• Indien ja, toets aanhalingstekens, kommas, hakies, vierkante hakies, escapes, onondersteunde waardes
• Gebruik die gerapporteerde posisie as 'n wenk
• ↓
• Maak die bron reg, ontleed dan weer

Toets JSON voordat jy dit ontleed of gebruik

NEXNARA JSON-formateerder en -vergelyking toets JSON in die blaaier met JSON.parse—nie eval nie.

Toets, maak mooi met 2 spasies, 4 spasies of tabs, minify, kopieer, aflaai en laai .json op. JSON Diff dek geneste objekte en skikkings, paaie, opsomming, filters en omruil. Ná ontleding vergelyk mooi en geminifiseerde kopieë van dieselfde data as gelyk; objeksluitels word per naam vergelyk.

Teks groter as 5 MB kan stadig voel. Teks groter as 15 MB word nie in die blaaier verwerk nie.

JSON-toetsing en -formatering gebeur in jou blaaier. Hierdie hulpmiddel stuur nie die JSON na ’n NEXNARA-bediener nie. Advertensies en ander werffunksies gebruik steeds die netwerk.

Plak die falende string in JSON-formateerder en -vergelyking en lees die eerste karakters voordat jy aanhalingstekens herskryf.

FAQ

Hoekom sê JSON.parse Unexpected token?

Die teks is nie geldige JSON by die punt waar die ontleder gestop het nie. Tipiese oorsake is aanhalingstekens, kommas, ekstra teks, of ’n nie-JSON-liggaam soos HTML.

Wat beteken Unexpected token < in JSON?

Die eerste onwettige karakter mag < wees. Dit wys dikwels na ’n HTML-bladsy, maar dit is nie bewys van ’n 404 of van HTML in elke geval nie. Kontroleer status, Content-Type en die rou liggaam.

Hoe vind ek die foutposisie in JSON?

As die enjin ’n posisie, reël of kolom rapporteer, kyk naby. Die werklike fout kan vroeër wees. Gebruik dit as ’n wenk, toets dan.

Kan JSON enkelaanhalingstekens gebruik?

Nee. Standaard-JSON-stringe en ledegname gebruik dubbele aanhalingstekens.

Kan JSON sluitkommas hê?

Nee. Standaard-JSON laat nie ’n komma ná die laaste eienskap of skikkingitem toe nie.

Hoe toets ek of ’n string geldige JSON is?

Roep JSON.parse in ’n try/catch, of plak die teks in JSON-formateerder en -vergelyking. As ontleding SyntaxError gooi, is die string nie geldige JSON nie.