Bakit Sinasabi ng JSON.parse na "Unexpected token"?

Ito ay pagtugis ng Unexpected token sa JSON.parse: ano ang ibig sabihin ng mali, paano basahin ang position, at ano ang gagawin kapag HTML ang katawan. Mas malawak na saklaw ng trailing comma, panipi, at Unexpected end ay nasa Mga Karaniwang Error sa JSON: Trailing Comma, Panipi, at Unexpected Token.

Ano ang Ibig Sabihin ng “Unexpected token” sa JSON.parse()?

Nangangailangan ang JSON.parse() ng gramatika ng JSON. Ang ilegal na karakter sa kasalukuyang posisyon ay naghahagis ng SyntaxError. Hindi valid ang {“name”:“Alex”,}: pagkatapos ng comma na iyon hindi maaaring magtapos ang object. Iba pa rin ang teksto ng mensahe at position ayon sa runtime.

Anong Mali ang Hinahagis ng JSON.parse()?

Karaniwang naghahagis ng SyntaxError ang hindi valid na JSON. I-log ang error.name para makumpirma ang uri. Huwag i-hardcode ang buong error.message: iba ang pagkakabuo ayon sa engine at bersyon.

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

1. Paggamit ng Single Quote Imbes na Double Quote

Hindi valid JSON ang {‘name’:‘Alex’}. Valid ang {“name”:“Alex”}. Gumagamit ng double quote ang string ng JSON at ang pangalan ng miyembro ng object. Ang JavaScript object literal tulad ng const user = { name: ‘Alex’ } ay maaaring legal na JavaScript at hindi pa rin JSON na teksto.

Hindi wasto

{'name':'Alex'}

Wasto

{"name":"Alex"}

2. Trailing Comma

Hindi valid sa standard JSON ang comma pagkatapos ng huling property o array item. Pumalya ang {“name”:“Alex”,“age”:30,} at [1, 2, 3,]. Ituring ito bilang isang sanhi ng Unexpected token; mas malalim ang talakayan ng trailing comma sa Mga Karaniwang Error sa JSON: Trailing Comma, Panipi, at Unexpected Token.

Hindi wasto

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

Wasto

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

[1, 2, 3,]

3. Pangalan ng Property na Walang Panipi

Maaaring maging JavaScript object literal ang { name: “Alex” }. Sa JSON, string ang pangalan ng miyembro ng object at kailangan ng double quote: {“name”:“Alex”}.

Hindi wasto

{
  name: "Alex"
}

Wasto

{
  "name": "Alex"
}

4. Hindi Valid na Pag-escape ng String

Sa tekstong JSON, nagsisimula ng escape ang backslash. Hindi valid ang hilaw na path tulad ng C:\Users\Alex dahil hindi legal na escape ang \U. Doblehin ang backslash. Huwag paghaluin ang pag-escape ng string ng host language at ang pag-escape ng JSON. Mas malalim ito sa Mga Karaniwang Error sa JSON: Trailing Comma, Panipi, at Unexpected Token.

Hindi wasto

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

Wasto

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

5. Dagdag na Teksto Bago o Pagkatapos ng JSON

Inaasahan ng JSON.parse ang isang JSON value. Ang unlapi tulad ng Success: bago ang {“ok”:true}, o ang hulapi tulad ng done pagkatapos nito, ay nagiging hindi valid ang buong string. Pinapayagan ang walang-saysay na puwang sa paligid ng iisang JSON value. Hindi ipinagbabawal sa JSON ang puwang bago o pagkatapos ng value.

Success:
{"ok":true}

{"ok":true}
done

6. Pag-parse ng HTML Imbes na JSON

Karaniwang kaso ng Unexpected token ang pagtawag ng response.json() sa pahinang HTML. Maling endpoint, HTML na 404 o 500, redirect ng login, katawan ng proxy, at fallback na pahina ay madalas nagsisimula sa markup. Masyadong malakas ang “Unexpected token < ay palaging HTML”: clue ang <, hindi patunay.

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

Ano ang Karaniwang Ibig Sabihin ng “Unexpected token <”?

Hindi karaniwang nagsisimula sa < ang JSON value. Kung nagsisimula ang katawan sa o , maaaring < ang unang ilegal na karakter. Sa lokal na pagtugis, tingnan ang HTTP status, Content-Type, at hilaw na katawan. Iba pa rin ang salita ng engine.

Suriin ang Sagot Bago I-parse

Isang beses lang makokonsumo ang katawan ng fetch. Sa lokal na pagtugis, basahin muna ang text(), suriin ang maikling unahan, tapos JSON.parse ang iisang string. Huwag tawagin ang response.json() tapos ang response.text() sa iisang sagot. Huwag i-log bilang default ang sensitibong payload sa produksiyon.

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

Ano ang Ibig Sabihin ng “at Position 123”?

May mga engine na nag-uulat ng position, linya, o column. Tingnan sa malapit ang sira na panipi, comma, brace, o escape. Doon napansin ng pag-parse ang problema; maaaring mas maaga ang tunay na sanhi. Hindi garantisado na iyon mismo ang sira na karakter.

Unexpected token laban sa Unexpected end

Nangangahulugan ang Unexpected token na may nakitang karakter ang parser na hindi nito inasahan. Maaaring lumabas ang Unexpected end kapag huminto ang input bago makumpleto ang value, tulad ng {“name”:“Alex” na walang closing brace. Nakadepende sa engine ang eksaktong salita. Mas malawak ang saklaw ng hindi kumpletong JSON sa Mga Karaniwang Error sa JSON: Trailing Comma, Panipi, at Unexpected Token.

{"name":"Alex"

Hindi Pareho ang JSON sa JavaScript Object Literal

Format ng data ang JSON. Syntax ng JavaScript ang JavaScript object literal. Ang JS object na may key na walang panipi, single quote, at trailing comma ay hindi valid na JSON na teksto. Hindi ligtas na ma-parse ng JSON.parse ang JavaScript object literal.

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

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

Puwede bang Maglaman ng Komento ang JSON?

Hindi sinusuportahan ng standard JSON ang komento. Hindi valid ang // na linya sa loob ng object. Ibang format ang JSON5 at magkahawig na extension. Tinitingnan ng I-format at ikumpara ang JSON ang standard JSON gamit ang JSON.parse at hindi itinuturing na JSON ang JSON5.

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

Valid ba sa JSON ang undefined, NaN, at Infinity?

Hindi. Ang mga JSON value ay object, array, string, number, true, false, at null. Hindi kasama ang undefined, NaN, at Infinity. Hindi kailangang object o array ang top-level value: valid JSON ang true, 123, “hello”, at null.

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

true
123
"hello"
null

Paano Ayusin ang Unexpected token Hakbang-hakbang

Gawin sa pinagmulan, hindi sa string ng mali:

1. Kumpirmahing JSON nga ang input, hindi HTML, log, o JavaScript.
2. Suriin ang unang mga karakter ng hilaw na input.
3. Kung galing sa API, tingnan ang HTTP status at Content-Type. Ni 200 ni application/json ay hindi nagtitiyak ng valid JSON.
4. I-validate ang syntax sa JSON parser.
5. Gamitin ang naiulat na position, linya, o column bilang clue, hindi bilang garantisadong ugat ng mali.
6. Suriin ang panipi, comma, curly brace, square bracket, at escape malapit doon.
7. Ihambing sa kopyang naka-format at na-validate.
8. Ayusin ang serializer o endpoint. Huwag tanggalin nang random ang naiulat na token.

Gamitin ang JSON.stringify() Kapag Gumagawa ng JSON sa JavaScript

Mas mainam ang JSON.stringify kaysa sa pagdugtong ng string sa kamay. Naglalabas ito ng valid na JSON na teksto para sa mga value na sine-serialize nito. Hindi nito pinapanatili ang bawat JavaScript value: may espesyal na ugali ang undefined, function, at symbol. Wala sa saklaw ng artikulong ito ang detalye niyon.

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

Hindi Wasto na JSON laban sa Tunay na Ayos

Nasuri ang mga pares na ito gamit ang JSON.parse. Para sa HTML, ang ayos ay ang sagot, hindi ang pag-edit ng syntax.

Problema	Hindi wasto	Ayos
Single quote	{'a':1}	{"a":1}
Trailing comma	{"a":1,}	{"a":1}
Key na walang panipi	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
Katawan na HTML	<html>...	Tingnan ang endpoint at hilaw na sagot. Huwag i-edit ang HTML upang maging JSON.

Simpleng Gabay sa Desisyon para sa Unexpected token

Kung pumalya ang JSON.parse, magpasya muna kung may JSON ka bago muling isulat ang panipi.

• Pumalya ang JSON.parse
• ↓
• Mula sa API? Tingnan ang status, Content-Type, at hilaw na katawan
• Nagsisimula ba sa JSON? Kung hindi, ayusin ang pinagmulan o endpoint
• Kung oo, i-validate ang panipi, comma, curly brace, square bracket, escape, hindi suportadong value
• Gamitin ang naiulat na position bilang clue
• ↓
• Ayusin ang pinagmulan, tapos i-parse ulit

I-validate ang JSON Bago I-parse o Gamitin

Tinitingnan ng NEXNARA I-format at ikumpara ang JSON ang JSON sa browser gamit ang JSON.parse—hindi eval.

Mag-validate, mag-pretty-print gamit ang 2 space, 4 space, o tab, mag-minify, kopyahin, i-download, at mag-upload ng .json. Sinasaklaw ng JSON Diff ang nested object at array, path, buod, filter, at palitan. Pagkatapos ng parse, magkatumbas ang pretty at minified na kopya ng iisang data; inihahambing ang object key ayon sa pangalan.

Maaaring bumagal ang tekstong mas malaki sa 5 MB. Hindi pinoproseso sa browser ang tekstong mas malaki sa 15 MB.

Nangyayari sa browser mo ang pag-validate at pag-format ng JSON. Hindi ipinapadala ng tool na ito ang JSON sa server ng NEXNARA. Gumagamit pa rin ng network ang ads at iba pang feature ng site.

I-paste ang pumalyang string sa I-format at ikumpara ang JSON at basahin ang unang mga karakter bago muling isulat ang panipi.

FAQ

Bakit sinasabi ng JSON.parse na Unexpected token?

Hindi valid JSON ang teksto sa puntong tumigil ang parser. Karaniwang sanhi ang panipi, comma, dagdag na teksto, o katawang hindi JSON tulad ng HTML.

Ano ang ibig sabihin ng Unexpected token < sa JSON?

Maaaring < ang unang ilegal na karakter. Madalas ituro iyon sa pahinang HTML, pero hindi iyon patunay ng 404 o ng HTML sa bawat kaso. Tingnan ang status, Content-Type, at hilaw na katawan.

Paano ko mahahanap ang posisyon ng mali sa JSON?

Kung nag-ulat ang engine ng position, linya, o column, tumingin sa malapit. Maaaring mas maaga ang tunay na mali. Gamitin bilang clue, tapos i-validate.

Puwede bang gumamit ng single quote ang JSON?

Hindi. Gumagamit ng double quote ang string at pangalan ng miyembro sa standard JSON.

Puwede bang magkaroon ng trailing comma ang JSON?

Hindi. Hindi pinapayagan ng standard JSON ang comma pagkatapos ng huling property o array item.

Paano ko susuriin kung valid JSON ang isang string?

Tawagin ang JSON.parse sa try/catch, o i-paste ang teksto sa I-format at ikumpara ang JSON. Kung maghahagis ng SyntaxError ang pag-parse, hindi valid JSON ang string.