Hướng dẫn fix lỗi Unexpected end of JSON input

Hiện tượng lỗi

Kịch bản Javascript dừng hoạt động tại một câu lệnh (Statement) sử dụng hàm JSON.parse(data)

Javascript Console của trình duyệt web hiển thị dòng Error Log:

Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at …

TÓM TẮT NỘI DUNG

1 Nguyên nhân
2 Cách khắc phục (Fix)

Nguyên nhân

Do dữ liệu của parameter (tham số) đưa vào hàm JSON.parse(data) sai cú pháp so với cấu trúc chuẩn của dữ liệu ở dạng JSON string. Trong hầu hết các trường hợp là do thiếu ký tự } hoặc ] ở vị trí cuối cùng của một chuỗi JSON (JSON string).

Note: JSON.parse(data) là hàm mặc định trong Javascript được hỗ trợ sẵn bởi hầu hết các trình duyệt web, có chức năng xử lý dữ liệu có trong tham số data từ dạng JSON string → object.

Ví dụ:

Đoạn code chứa lỗi	Đoạn code đúng
`var my_json_string = '{"prop1": 5, "prop2": "New York"';` `var data = JSON.parse(my_json_string);`	`var my_json_string = '{"prop1": 5, "prop2": "New York"}';` `var data = JSON.parse(my_json_string);`
`var my_json_string = '[1, "yellow", 256, "black"';` `var data = JSON.parse(my_json_string);`	`var my_json_string = '[1, "yellow", 256, "black"]';` `var data = JSON.parse(my_json_string);`

Cách khắc phục (Fix)

Bước 1. Xác định vị trí của câu lệnh sử dụng hàm JSON.parse()

Trên giao diện Javascript Console của trình duyệt web, bạn click vào đường link vị trí câu lệnh (hàng thứ 3) của dòng Error log để xác định vị trí của câu lệnh sử dụng hàm JSON.parse().

Bước 2. Kiểm tra cú pháp của dữ liệu có trong tham số truyền vào hàm JSON.parse()

Có nhiều cách để kiểm tra cú pháp của dữ liệu JSON. Cách phổ biến nhất là nhìn bằng mắt thường trong những trường hợp đơn giản. Do đặc trưng của lỗi này là thiếu ký tự } hoặc ] ở vị trí cuối cùng của một chuỗi JSON, chính vì thế ta có thể dễ dàng nhận biết vị trí lỗi cú pháp.

Nếu bạn sử dụng các phần mềm code editor phổ biến như VS Code, Sublime Text, Atom, bạn cũng sẽ có một cách khác để kiểm tra cú pháp của dữ liệu JSON: Copy toàn bộ dữ liệu JSON đó sang một file mới hoàn toàn → Formatter của phần mềm sẽ highlight vị trí lỗi cú pháp.

Ngoài ra, các Javascript Console của trình duyệt còn hỗ trợ ta một cách kiểm tra dữ liệu JSON đang bị lỗi nữa, khá nhanh và tiện luôn, chính là click vào đường link bên phải dòng error log.

Bước 3. Sửa lại dữ liệu JSON cho đúng cú pháp và lưu lại file code.

Bước 4. Reload lại trình duyệt để kiểm tra

Sau khi bạn đã sửa cấu trúc dữ liệu trong tham số truyền vào hàm JSON.parse(), bạn hãy reload lại trình duyệt để xem lỗi có còn tồn tại.

Và chúng ta cũng đã đi qua mục cuối cùng trong bài hướng dẫn rồi. Nếu bạn có bất kỳ thắc mắc nào, hay không thực hiện được bước nào, hãy để lại bình luận bên dưới nhé. Nếu bạn cảm thấy bài viết hay và hữu ích, hãy để lại 1 like, share, đánh giá để ủng hộ đội ngũ biên tập của hoccode.org nhé!

Chúc các bạn thực hiện thành công!