ເປັນຫຍັງ JSON.parse ຈຶ່ງເວົ້າ "Unexpected token"?

ນີ້ແມ່ນການແກ້ Unexpected token ຂອງ JSON.parse: ຂໍ້ຜິດໝາຍຄວາມວ່າແນວໃດ, ວິທີອ່ານຕຳແໜ່ງ ແລະຈະເຮັດແນວໃດເມື່ອຮ່າງກາຍເປັນ HTML. ການກວມກວ້າງກວ່າກ່ຽວກັບຈຸດຈອກທ້າຍ, ເຄື່ອງໝາຍຄຳເວົ້າ ແລະ Unexpected end ຢູ່ ຂໍ້ຜິດ JSON ທົ່ວໄປ: ຈຸດຈອກທ້າຍ, ເຄື່ອງໝາຍຄຳເວົ້າ ແລະ Unexpected token.

“Unexpected token” ໃນ JSON.parse() ໝາຍຄວາມວ່າແນວໃດ?

JSON.parse() ຕ້ອງການໄວຍະກອນ JSON. ອັກສອນຜິດກົດໝາຍຢູ່ຕຳແໜ່ງປັດຈຸບັນໂຍນ SyntaxError. {“name”:“Alex”,} ບໍ່ຖືກ: ຫຼັງຈຸດຈອກນັ້ນວັດຖຸຈົບບໍ່ໄດ້. ຂໍ້ຄວາມຂ່າວ ແລະຕຳແໜ່ງຍັງຕ່າງກັນຕາມເວລາແລ່ນ.

JSON.parse() ໂຍນຂໍ້ຜິດໃດ?

JSON ບໍ່ຖືກໂດຍທົ່ວໄປໂຍນ SyntaxError. ບັນທຶກ error.name ເພື່ອຢືນຢັນປະເພດ. ຢ່າຂຽນ error.message ເຕັມແບບແຂງ: ເຄື່ອງຈັກ ແລະລຸ້ນໃຊ້ຄຳຕ່າງກັນ.

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

1. ໃຊ້ເຄື່ອງໝາຍຄຳເວົ້າດຽວແທນເຄື່ອງໝາຍຄຳເວົ້າຄູ່

{‘name’:‘Alex’} ເປັນ JSON ບໍ່ຖືກ. {“name”:“Alex”} ຖືກ. ສະຕຣິງ JSON ແລະຊື່ສະມາຊິກວັດຖຸໃຊ້ເຄື່ອງໝາຍຄຳເວົ້າຄູ່. ລິເຕີຣັນວັດຖຸ JavaScript ເຊັ່ນ const user = { name: ‘Alex’ } ອາດເປັນ JavaScript ຖືກກົດ ແຕ່ຍັງບໍ່ແມ່ນຂໍ້ຄວາມ JSON.

ບໍ່ຖືກ

{'name':'Alex'}

ຖືກ

{"name":"Alex"}

2. ຈຸດຈອກທ້າຍ

ຈຸດຈອກຫຼັງຄຸນສົມບັດ ຫຼືລາຍການອາເຣສຸດທ້າຍບໍ່ແມ່ນ JSON ມາດຕະຖານທີ່ຖືກ. {“name”:“Alex”,“age”:30,} ແລະ [1, 2, 3,] ທັງສອງລົ້ມເຫຼວ. ຖືວ່ານີ້ເປັນສາເຫດ Unexpected token ອັນໜຶ່ງ; ຂໍ້ຜິດ JSON ທົ່ວໄປ: ຈຸດຈອກທ້າຍ, ເຄື່ອງໝາຍຄຳເວົ້າ ແລະ Unexpected token ກວມຈຸດຈອກທ້າຍເລິກກວ່າ.

ບໍ່ຖືກ

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

ຖືກ

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

[1, 2, 3,]

3. ຊື່ຄຸນສົມບັດບໍ່ມີເຄື່ອງໝາຍຄຳເວົ້າ

{ name: “Alex” } ອາດເປັນລິເຕີຣັນວັດຖຸ JavaScript. ໃນ JSON ຊື່ສະມາຊິກເປັນສະຕຣິງ ແລະຕ້ອງການເຄື່ອງໝາຍຄຳເວົ້າຄູ່: {“name”:“Alex”}.

ບໍ່ຖືກ

{
  name: "Alex"
}

ຖືກ

{
  "name": "Alex"
}

4. Escape ສະຕຣິງບໍ່ຖືກ

ໃນຂໍ້ຄວາມ JSON ເສັ້ນຂີດຫຼັງເລີ່ມ escape. ເສັ້ນທາງດິບເຊັ່ນ C:\Users\Alex ບໍ່ຖືກ ເພາະ \U ບໍ່ແມ່ນ escape ຖືກກົດ. ທະວີເສັ້ນຂີດຫຼັງ. ຢ່າປະສົມ escape ພາສາເຈົ້າພາບກັບ escape JSON. ຂໍ້ຜິດ JSON ທົ່ວໄປ: ຈຸດຈອກທ້າຍ, ເຄື່ອງໝາຍຄຳເວົ້າ ແລະ Unexpected token ກວມເລື່ອງນີ້ເລິກກວ່າ.

ບໍ່ຖືກ

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

ຖືກ

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

5. ຂໍ້ຄວາມເກີນກ່ອນ ຫຼືຫຼັງ JSON

JSON.parse ຄາດຄ່າ JSON ອັນດຽວ. ຄຳນຳໜ້າເຊັ່ນ Success: ກ່ອນ {“ok”:true} ຫຼືຄຳຕໍ່ທ້າຍເຊັ່ນ done ຫຼັງມັນ ທຳໃຫ້ສະຕຣິງທັງໝົດບໍ່ຖືກ. ຊ່ອງຫວ່າງບໍ່ສຳຄັນຮອບຄ່າ JSON ອັນດຽວອະນຸຍາດ. JSON ບໍ່ຖືກຫ້າມບໍ່ໃຫ້ມີຊ່ອງຫວ່າງກ່ອນ ຫຼືຫຼັງຄ່າ.

Success:
{"ok":true}

{"ok":true}
done

6. ແຍກ HTML ແທນ JSON

ເອີ້ນ response.json() ໃນໜ້າ HTML ເປັນກໍລະນີ Unexpected token ທົ່ວໄປ. Endpoint ຜິດ, ໜ້າ HTML 404 ຫຼື 500, ການປ່ຽນເສັ້ນເຂົ້າລະບົບ, ຮ່າງກາຍພຣັອກຊີ ແລະໜ້າສຳຮອງມັກເລີ່ມດ້ວຍເຄື່ອງໝາຍ. “Unexpected token < ຕະຫຼອດໝາຍຄວາມວ່າ HTML” ແຮງເກີນໄປ: < ເປັນຄຳແນະນຳ ບໍ່ແມ່ນຫຼັກຖານ.

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

“Unexpected token <” ໂດຍທົ່ວໄປໝາຍຄວາມວ່າແນວໃດ?

ຄ່າ JSON ປົກກະຕິບໍ່ເລີ່ມດ້ວຍ <. ຖ້າຮ່າງກາຍເລີ່ມດ້ວຍ ຫຼື < ອາດເປັນອັກສອນຜິດກົດໝາຍທຳອິດ. ໃນການແກ້ບັນຫາທ້ອງຖິ່ນ ກວດສະຖານະ HTTP, Content-Type ແລະຮ່າງກາຍດິບ. ຄຳເຄື່ອງຈັກຍັງຕ່າງກັນ.

ກວດຄຳຕອບກ່ອນແຍກ

ຮ່າງກາຍ fetch ໃຊ້ໄດ້ພຽງຄັ້ງດຽວ. ໃນການແກ້ບັນຫາທ້ອງຖິ່ນ ອ່ານ text() ກ່ອນ, ກວດຄຳນຳໜ້າສັ້ນ, ຈາກນັ້ນ JSON.parse ສະຕຣິງດຽວກັນ. ຢ່າເອີ້ນ response.json() ແລ້ວ response.text() ໃນຄຳຕອບດຽວກັນ. ຢ່າບັນທຶກພາລະຜະລິດທີ່ລະອຽດອ່ອນເປັນຄ່າເລີ່ມຕົ້ນ.

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

“at position 123” ໝາຍຄວາມວ່າແນວໃດ?

ເຄື່ອງຈັກບາງອັນລາຍງານຕຳແໜ່ງ, ແຖວ ຫຼືຖັນ. ຫາເຄື່ອງໝາຍຄຳເວົ້າ, ຈຸດຈອກ, ວົງເລັບ ຫຼື escape ຜິດໃກ້ໆ. ດັດຊະນີນັ້ນແມ່ນບ່ອນການແຍກສັງເກດບັນຫາ; ສາເຫດຈິງອາດຢູ່ກ່ອນ. ບໍ່ຮັບປະກັນວ່າເປັນອັກສອນຜິດທີ່ແນ່ນອນ.

Unexpected token vs Unexpected end

Unexpected token ໝາຍຄວາມວ່າຕົວແຍກພົບອັກສອນທີ່ບໍ່ຄາດ. Unexpected end ອາດປາກົດເມື່ອການປ້ອນຢຸດກ່ອນຄ່າຄົບ, ເຊັ່ນ {“name”:“Alex” ບໍ່ມີວົງເລັບປິດ. ຄຳທີ່ແນ່ນອນຂຶ້ນກັບເຄື່ອງຈັກ. ຂໍ້ຜິດ JSON ທົ່ວໄປ: ຈຸດຈອກທ້າຍ, ເຄື່ອງໝາຍຄຳເວົ້າ ແລະ Unexpected token ກວມ JSON ບໍ່ຄົບກວ້າງກວ່າ.

{"name":"Alex"

JSON ບໍ່ເທົ່າກັບລິເຕີຣັນວັດຖຸ JavaScript

JSON ເປັນຮູບແບບຂໍ້ມູນ. ລິເຕີຣັນວັດຖຸ JavaScript ເປັນໄວຍະກອນ JavaScript. ວັດຖຸ JS ທີ່ມີກະແຈບໍ່ມີເຄື່ອງໝາຍຄຳເວົ້າ, ເຄື່ອງໝາຍຄຳເວົ້າດຽວ ແລະຈຸດຈອກທ້າຍບໍ່ແມ່ນຂໍ້ຄວາມ JSON ທີ່ຖືກ. JSON.parse ແຍກລິເຕີຣັນວັດຖຸ JavaScript ຢ່າງປອດໄພບໍ່ໄດ້.

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

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

JSON ມີຄຳເຫັນໄດ້ບໍ?

JSON ມາດຕະຖານບໍ່ຮອງຮັບຄຳເຫັນ. ແຖວ // ໃນວັດຖຸບໍ່ຖືກ. JSON5 ແລະສ່ວນຂະຫຍາຍຄ້າຍຄືເປັນຮູບແບບອື່ນ. ຈັດ JSON / Diff ກວດ JSON ມາດຕະຖານດ້ວຍ JSON.parse ແລະບໍ່ຖື JSON5 ເປັນ JSON.

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

undefined, NaN ແລະ Infinity ເປັນ JSON ທີ່ຖືກບໍ?

ບໍ່. ຄ່າ JSON ແມ່ນວັດຖຸ, ອາເຣ, ສະຕຣິງ, ເລກ, true, false ແລະ null. undefined, NaN ແລະ Infinity ບໍ່ແມ່ນ. ຄ່າລະດັບເທິງບໍ່ຈຳເປັນຕ້ອງເປັນວັດຖຸ ຫຼືອາເຣ: true, 123, “hello” ແລະ null ເປັນ JSON ທີ່ຖືກ.

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

true
123
"hello"
null

ວິທີແກ້ຂໍ້ຜິດ Unexpected token ຂັ້ນຕອນ

ເຮັດວຽກທີ່ແຫຼ່ງ ບໍ່ແມ່ນສະຕຣິງຂໍ້ຜິດ:

1. ຢືນຢັນວ່າການປ້ອນແມ່ນ JSON ຈິງ—ບໍ່ແມ່ນ HTML, ບັນທຶກ ຫຼື JavaScript.
2. ກວດອັກສອນທຳອິດຂອງການປ້ອນດິບ.
3. ຖ້າມາຈາກ API ກວດສະຖານະ HTTP ແລະ Content-Type. ທັງ 200 ແລະ application/json ບໍ່ຮັບປະກັນ JSON ທີ່ຖືກ.
4. ກວດໄວຍະກອນໃນຕົວແຍກ JSON.
5. ໃຊ້ຕຳແໜ່ງ, ແຖວ ຫຼືຖັນທີ່ລາຍງານເປັນຄຳແນະນຳ ບໍ່ແມ່ນສາເຫດຮາກທີ່ຮັບປະກັນ.
6. ກວດເຄື່ອງໝາຍຄຳເວົ້າ, ຈຸດຈອກ, ວົງເລັບ, ວົງກຳມະ, ແລະ escape ໃກ້ບໍລິເວນນັ້ນ.
7. ປຽບທຽບກັບສຳເນົາທີ່ຈັດຮູບແບບ ແລະກວດແລ້ວ.
8. ແກ້ຕົວຈັດລຳດັບ ຫຼື endpoint. ຢ່າລຶບໂທເຄັນທີ່ລາຍງານແບບສຸ່ມ.

ໃຊ້ JSON.stringify() ເມື່ອຜະລິດ JSON ໃນ JavaScript

ມັກ JSON.stringify ກວ່າການຕໍ່ສະຕຣິງດ້ວຍມື. ມັນສົ່ງຂໍ້ຄວາມ JSON ທີ່ຖືກສຳລັບຄ່າທີ່ມັນຈັດລຳດັບ. ມັນບໍ່ຮັກສາທຸກຄ່າ JavaScript: undefined, ຟັງຊັນ ແລະສັນຍາລັກມີພຶດຕິກຳພິເສດ. ລາຍລະອຽດນັ້ນຢູ່ນອກຂອບເຂດທີ່ນີ້.

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

JSON ບໍ່ຖືກ vs ການແກ້ຈິງ

ຄູ່ເຫຼົ່ານີ້ຖືກກວດດ້ວຍ JSON.parse. ສຳລັບ HTML ການແກ້ແມ່ນຄຳຕອບ ບໍ່ແມ່ນການແກ້ໄວຍະກອນ.

ບັນຫາ	ບໍ່ຖືກ	ການແກ້
ເຄື່ອງໝາຍຄຳເວົ້າດຽວ	{'a':1}	{"a":1}
ຈຸດຈອກທ້າຍ	{"a":1,}	{"a":1}
ກະແຈບໍ່ມີເຄື່ອງໝາຍຄຳເວົ້າ	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
ຮ່າງກາຍ HTML	<html>...	ກວດ endpoint ແລະຄຳຕອບດິບ. ຢ່າແກ້ HTML ໃຫ້ເປັນ JSON.

ຄູ່ມືຕັດສິນ Unexpected token ງ່າຍໆ

ຖ້າ JSON.parse ລົ້ມເຫຼວ ຕັດສິນວ່າທ່ານມີ JSON ຫຼືບໍ່ ກ່ອນຂຽນເຄື່ອງໝາຍຄຳເວົ້າໃໝ່.

• JSON.parse ລົ້ມເຫຼວ
• ↓
• ຈາກ API? ກວດສະຖານະ, Content-Type ແລະຮ່າງກາຍດິບ
• ເລີ່ມດ້ວຍ JSON ບໍ? ຖ້າບໍ່ ແກ້ແຫຼ່ງ ຫຼື endpoint
• ຖ້າແມ່ນ ກວດເຄື່ອງໝາຍຄຳເວົ້າ, ຈຸດຈອກ, ວົງເລັບ, ວົງກຳມະ, escape, ຄ່າບໍ່ຮອງຮັບ
• ໃຊ້ຕຳແໜ່ງທີ່ລາຍງານເປັນຄຳແນະນຳ
• ↓
• ແກ້ແຫຼ່ງ ແລ້ວແຍກອີກ

ກວດ JSON ກ່ອນແຍກ ຫຼືໃຊ້

NEXNARA ຈັດ JSON / Diff ກວດ JSON ໃນໂປຣແກຣມທ່ອງເວັບດ້ວຍ JSON.parse—ບໍ່ແມ່ນ eval.

ກວດໄດ້, ເຮັດໃຫ້ງາມດ້ວຍຊ່ອງ 2, ຊ່ອງ 4 ຫຼືແທັບ, minify, ສຳເນົາ, ດາວໂຫຼດ ແລະອັບໂຫຼດ .json. JSON Diff ກວມວັດຖຸ ແລະອາເຣຊ້ອນ, ເສັ້ນທາງ, ສະຫຼຸບ, ຕົວກອງ ແລະສະຫຼັບ. ຫຼັງແຍກ ສຳເນົາງາມ ແລະ minify ຂອງຂໍ້ມູນດຽວກັນປຽບທຽບເທົ່າກັນ; ກະແຈວັດຖຸປຽບທຽບຕາມຊື່.

ຂໍ້ຄວາມໃຫຍ່ກວ່າ 5 MB ອາດຮູ້ສຶກຊ້າ. ຂໍ້ຄວາມໃຫຍ່ກວ່າ 15 MB ບໍ່ຖືກປະມວນຜົນໃນໂປຣແກຣມທ່ອງເວັບ.

ການກວດ ແລະຈັດຮູບແບບ JSON ເກີດໃນໂປຣແກຣມທ່ອງເວັບຂອງທ່ານ. ເຄື່ອງມືນີ້ບໍ່ສົ່ງ JSON ໄປເຊີເວີ NEXNARA. ໂຄສະນາ ແລະຄຸນສົມບັດເວັບອື່ນຍັງໃຊ້ເຄືອຂ່າຍ.

ວາງສະຕຣິງທີ່ລົ້ມເຫຼວໃສ່ ຈັດ JSON / Diff ແລະອ່ານອັກສອນທຳອິດກ່ອນຂຽນເຄື່ອງໝາຍຄຳເວົ້າໃໝ່.

FAQ

ເປັນຫຍັງ JSON.parse ຈຶ່ງເວົ້າ Unexpected token?

ຂໍ້ຄວາມບໍ່ແມ່ນ JSON ທີ່ຖືກຢູ່ຈຸດທີ່ຕົວແຍກຢຸດ. ສາເຫດທົ່ວໄປແມ່ນເຄື່ອງໝາຍຄຳເວົ້າ, ຈຸດຈອກ, ຂໍ້ຄວາມເກີນ ຫຼືຮ່າງກາຍບໍ່ແມ່ນ JSON ເຊັ່ນ HTML.

Unexpected token < ໃນ JSON ໝາຍຄວາມວ່າແນວໃດ?

ອັກສອນຜິດກົດໝາຍທຳອິດອາດເປັນ <. ນັ້ນມັກຊີ້ໜ້າ HTML ແຕ່ບໍ່ແມ່ນຫຼັກຖານຂອງ 404 ຫຼື HTML ໃນທຸກກໍລະນີ. ກວດສະຖານະ, Content-Type ແລະຮ່າງກາຍດິບ.

ຈະຫາຕຳແໜ່ງຂໍ້ຜິດໃນ JSON ແນວໃດ?

ຖ້າເຄື່ອງຈັກລາຍງານຕຳແໜ່ງ, ແຖວ ຫຼືຖັນ ເບິ່ງໃກ້ໆ. ຄວາມຜິດຈິງອາດຢູ່ກ່ອນ. ໃຊ້ເປັນຄຳແນະນຳ ແລ້ວກວດ.

JSON ໃຊ້ເຄື່ອງໝາຍຄຳເວົ້າດຽວໄດ້ບໍ?

ບໍ່. ສະຕຣິງ JSON ມາດຕະຖານ ແລະຊື່ສະມາຊິກໃຊ້ເຄື່ອງໝາຍຄຳເວົ້າຄູ່.

JSON ມີຈຸດຈອກທ້າຍໄດ້ບໍ?

ບໍ່. JSON ມາດຕະຖານບໍ່ອະນຸຍາດຈຸດຈອກຫຼັງຄຸນສົມບັດ ຫຼືລາຍການອາເຣສຸດທ້າຍ.

ຈະກວດວ່າສະຕຣິງເປັນ JSON ທີ່ຖືກແນວໃດ?

ເອີ້ນ JSON.parse ໃນ try/catch ຫຼືວາງຂໍ້ຄວາມໃສ່ ຈັດ JSON / Diff. ຖ້າການແຍກໂຍນ SyntaxError ສະຕຣິງບໍ່ແມ່ນ JSON ທີ່ຖືກ.