Vì sao JSON.parse báo "Unexpected token"?

Đây là bài lần Unexpected token của JSON.parse: lỗi nghĩa là gì, cách đọc position, và làm gì khi thân là HTML. Phần rộng hơn về dấu phẩy thừa, nháy, và Unexpected end nằm ở Lỗi JSON thường gặp: Dấu phẩy thừa, dấu nháy và Unexpected token.

“Unexpected token” trong JSON.parse() nghĩa là gì?

JSON.parse() đòi hỏi ngữ pháp JSON. Ký tự bất hợp pháp ở vị trí hiện tại ném SyntaxError. {“name”:“Alex”,} không hợp lệ: sau dấu phẩy đó đối tượng không thể kết thúc. Nội dung thông báo và position vẫn khác theo runtime.

JSON.parse() ném lỗi nào?

JSON không hợp lệ thường ném SyntaxError. Ghi error.name để xác nhận kiểu. Đừng hardcode toàn bộ error.message: engine và phiên bản diễn đạt khác nhau.

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

1. Dùng nháy đơn thay vì nháy kép

{‘name’:‘Alex’} không phải JSON hợp lệ. {“name”:“Alex”} thì hợp lệ. Chuỗi JSON và tên thành viên đối tượng dùng nháy kép. Literal đối tượng JavaScript như const user = { name: ‘Alex’ } có thể là JavaScript hợp pháp mà vẫn không phải văn bản JSON.

Không hợp lệ

{'name':'Alex'}

Hợp lệ

{"name":"Alex"}

2. Dấu phẩy thừa

Dấu phẩy sau thuộc tính hoặc phần tử mảng cuối không hợp lệ trong JSON chuẩn. {“name”:“Alex”,“age”:30,} và [1, 2, 3,] đều thất bại. Coi đây là một nguyên nhân Unexpected token; Lỗi JSON thường gặp: Dấu phẩy thừa, dấu nháy và Unexpected token bàn dấu phẩy thừa sâu hơn.

Không hợp lệ

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

Hợp lệ

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

[1, 2, 3,]

3. Tên thuộc tính không có nháy

{ name: “Alex” } có thể là literal đối tượng JavaScript. Trong JSON, tên thành viên đối tượng là chuỗi và cần nháy kép: {“name”:“Alex”}.

Không hợp lệ

{
  name: "Alex"
}

Hợp lệ

{
  "name": "Alex"
}

4. Escape chuỗi không hợp lệ

Trong văn bản JSON, dấu gạch chéo ngược bắt đầu escape. Đường dẫn thô như C:\Users\Alex không hợp lệ vì \U không phải escape hợp pháp. Nhân đôi gạch chéo ngược. Đừng trộn escape chuỗi của ngôn ngữ chủ với escape JSON. Lỗi JSON thường gặp: Dấu phẩy thừa, dấu nháy và Unexpected token bàn việc này sâu hơn.

Không hợp lệ

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

Hợp lệ

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

5. Văn bản thừa trước hoặc sau JSON

JSON.parse kỳ vọng đúng một giá trị JSON. Tiền tố như Success: trước {“ok”:true}, hoặc hậu tố như done sau đó, làm cả chuỗi không hợp lệ. Khoảng trắng không mang nghĩa quanh một giá trị JSON thì được phép. JSON không cấm có khoảng trắng trước hoặc sau giá trị.

Success:
{"ok":true}

{"ok":true}
done

6. Phân tích HTML thay vì JSON

Gọi response.json() trên trang HTML là trường hợp Unexpected token phổ biến. Endpoint sai, trang HTML 404 hoặc 500, chuyển hướng đăng nhập, thân proxy, và trang dự phòng thường bắt đầu bằng markup. “Unexpected token < luôn nghĩa là HTML” quá mạnh: < là gợi ý, không phải bằng chứng.

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

“Unexpected token <” thường nghĩa là gì?

Giá trị JSON thường không bắt đầu bằng <. Nếu thân bắt đầu bằng hoặc , < có thể là ký tự bất hợp pháp đầu tiên. Khi lần tại máy, kiểm tra trạng thái HTTP, Content-Type, và thân thô. Cách diễn đạt của engine vẫn khác.

Kiểm tra phản hồi trước khi phân tích

Thân fetch chỉ tiêu thụ được một lần. Khi lần tại máy, đọc text() trước, xem một đoạn đầu ngắn, rồi JSON.parse cùng chuỗi đó. Đừng gọi response.json() rồi response.text() trên cùng một phản hồi. Đừng ghi nhật ký payload sản xuất nhạy cảm theo mặc định.

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” nghĩa là gì?

Một số engine báo position, dòng, hoặc cột. Tìm gần đó nháy, phẩy, ngoặc, hoặc escape hỏng. Chỉ số đó là nơi phân tích nhận ra vấn đề; nguyên nhân thật có thể sớm hơn. Nó không đảm bảo đúng ký tự lỗi.

Unexpected token đối với Unexpected end

Unexpected token nghĩa là bộ phân tích gặp ký tự nó không ngờ. Unexpected end có thể xuất hiện khi đầu vào dừng trước khi giá trị hoàn tất, như {“name”:“Alex” thiếu ngoặc đóng. Cách diễn đạt chính xác phụ thuộc engine. Lỗi JSON thường gặp: Dấu phẩy thừa, dấu nháy và Unexpected token bàn JSON chưa hoàn chỉnh rộng hơn.

{"name":"Alex"

JSON không giống literal đối tượng JavaScript

JSON là định dạng dữ liệu. Literal đối tượng JavaScript là cú pháp JavaScript. Đối tượng JS với khóa không nháy, nháy đơn, và dấu phẩy thừa không phải văn bản JSON hợp lệ. JSON.parse không thể phân tích an toàn literal đối tượng JavaScript.

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

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

JSON có chứa chú thích được không?

JSON chuẩn không hỗ trợ chú thích. Một dòng // trong đối tượng là không hợp lệ. JSON5 và các phần mở rộng tương tự là định dạng khác. Định dạng và so sánh JSON kiểm tra JSON chuẩn bằng JSON.parse và không coi JSON5 là JSON.

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

undefined, NaN và Infinity có phải JSON hợp lệ?

Không. Giá trị JSON là object, array, string, number, true, false, và null. undefined, NaN, và Infinity thì không. Giá trị cấp cao nhất không cần là đối tượng hay mảng: true, 123, “hello”, và null đều là JSON hợp lệ.

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

true
123
"hello"
null

Cách sửa lỗi Unexpected token từng bước

Làm việc với nguồn, không phải chuỗi lỗi:

1. Xác nhận đầu vào thật sự là JSON, không phải HTML, nhật ký, hay JavaScript.
2. Xem các ký tự đầu của đầu vào thô.
3. Nếu đến từ API, kiểm tra trạng thái HTTP và Content-Type. Cả 200 lẫn application/json đều không đảm bảo JSON hợp lệ.
4. Kiểm tra cú pháp trong bộ phân tích JSON.
5. Dùng position, dòng, hoặc cột được báo như gợi ý, không như nguyên nhân gốc được đảm bảo.
6. Kiểm tra nháy, phẩy, ngoặc nhọn, ngoặc vuông, và escape gần khu vực đó.
7. So với bản đã định dạng và đã kiểm tra.
8. Sửa bộ tuần tự hóa hoặc endpoint. Đừng xóa token được báo một cách ngẫu nhiên.

Dùng JSON.stringify() khi tạo JSON trong JavaScript

Ưu tiên JSON.stringify hơn là nối chuỗi bằng tay. Nó phát văn bản JSON hợp lệ cho các giá trị nó tuần tự hóa. Nó không giữ mọi giá trị JavaScript: undefined, hàm, và symbol có hành vi đặc biệt. Chi tiết đó nằm ngoài phạm vi bài này.

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

JSON không hợp lệ đối với cách sửa thật

Các cặp này đã được kiểm bằng JSON.parse. Với HTML, chỗ sửa là phản hồi, không phải chỉnh cú pháp.

Vấn đề	Không hợp lệ	Cách sửa
Nháy đơn	{'a':1}	{"a":1}
Dấu phẩy thừa	{"a":1,}	{"a":1}
Khóa không nháy	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
Thân HTML	<html>...	Kiểm tra endpoint và phản hồi thô. Đừng sửa HTML thành JSON.

Hướng dẫn quyết định Unexpected token đơn giản

Nếu JSON.parse thất bại, hãy quyết định xem bạn có JSON hay không trước khi viết lại nháy.

• JSON.parse thất bại
• ↓
• Từ API? Kiểm tra trạng thái, Content-Type, và thân thô
• Có bắt đầu bằng JSON không? Nếu không, sửa nguồn hoặc endpoint
• Nếu có, kiểm nháy, phẩy, ngoặc nhọn, ngoặc vuông, escape, giá trị không hỗ trợ
• Dùng position được báo như gợi ý
• ↓
• Sửa nguồn, rồi phân tích lại

Kiểm JSON trước khi phân tích hoặc dùng

NEXNARA Định dạng và so sánh JSON kiểm JSON trong trình duyệt bằng JSON.parse—không phải eval.

Kiểm, làm đẹp với 2 khoảng trắng, 4 khoảng trắng, hoặc tab, minify, sao chép, tải xuống, và tải lên .json. JSON Diff phủ đối tượng và mảng lồng nhau, đường dẫn, tóm tắt, bộ lọc, và hoán đổi. Sau khi phân tích, bản đẹp và bản minify của cùng dữ liệu so sánh bằng nhau; khóa đối tượng so theo tên.

Văn bản lớn hơn 5 MB có thể chậm. Văn bản lớn hơn 15 MB không được xử lý trong trình duyệt.

Kiểm và định dạng JSON diễn ra trong trình duyệt của bạn. Công cụ này không gửi JSON tới máy chủ NEXNARA. Quảng cáo và tính năng trang khác vẫn dùng mạng.

Dán chuỗi thất bại vào Định dạng và so sánh JSON và đọc các ký tự đầu trước khi viết lại nháy.

FAQ

Vì sao JSON.parse nói Unexpected token?

Văn bản không phải JSON hợp lệ tại điểm bộ phân tích dừng. Nguyên nhân điển hình là nháy, phẩy, văn bản thừa, hoặc thân không-JSON như HTML.

Unexpected token < trong JSON nghĩa là gì?

Ký tự bất hợp pháp đầu tiên có thể là <. Điều đó thường trỏ tới trang HTML, nhưng không phải bằng chứng 404 hay HTML trong mọi trường hợp. Kiểm tra trạng thái, Content-Type, và thân thô.

Làm sao tìm vị trí lỗi trong JSON?

Nếu engine báo position, dòng, hoặc cột, nhìn gần đó. Sai lầm thật có thể sớm hơn. Dùng như gợi ý, rồi kiểm.

JSON có dùng nháy đơn được không?

Không. Chuỗi và tên thành viên JSON chuẩn dùng nháy kép.

JSON có dấu phẩy thừa được không?

Không. JSON chuẩn không cho phép dấu phẩy sau thuộc tính hoặc phần tử mảng cuối.

Làm sao kiểm một chuỗi có phải JSON hợp lệ?

Gọi JSON.parse trong try/catch, hoặc dán văn bản vào Định dạng và so sánh JSON. Nếu phân tích ném SyntaxError, chuỗi đó không phải JSON hợp lệ.