SyntaxError: ข้อผิดพลาด Unexpected token < in JSON at position 0 หมายถึง โค้ด JavaScript ที่ได้รับเป็นข้อมูลที่ไม่ใช่ข้อมูล JSON ซึ่งมักเป็นไฟล์ HTML แทนที่จะเป็นไฟล์ JSON ตามที่ต้องการ หากต้องการแก้ไขปัญหา โปรดตรวจสอบข้อมูลที่ได้รับเพื่อระบุปัญหาที่เกิดขึ้น หากใช้ fetch() หรือ JSON.parse() ให้บันทึกข้อมูลไปยังคอนโซลและตรวจสอบปัญหาที่พบบ่อย เช่น URL ไม่ถูกต้อง, ข้อผิดพลาดของเซิร์ฟเวอร์ หรือการกำหนดตัวแปรและปัญหาเกี่ยวกับการเข้ารหัสอักขระคู่มือนี้จะช่วยแก้ไข SyntaxError: Unexpected token < in JSON at position 0 คู่มือนี้ยังใช้ได้กับข้อผิดพลาดเดียวกันแบบอื่นๆ ที่พบบ่อย ซึ่งได้แก่
SyntaxError: The string did not match the expected patternSyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON dataJSON Parse error: Unrecognized token '<'ข้อผิดพลาดเหล่านี้บ่งชี้ว่าโค้ด JavaScript ที่คุณต้องการให้รับไฟล์ JSON นั้นได้รับไฟล์ชนิดอื่นแทน (อาจจะเป็น HTML ที่อยู่ในรูปแบบข้อผิดพลาดจากฝั่งเซิร์ฟเวอร์) คุณจำเป็นต้องตรวจสอบไฟล์ที่คุณได้มาแทนไฟล์ JSON เพื่อหาว่าปัญหาคืออะไร
โดยปกติแล้ว ข้อผิดพลาดนี้จะเกิดขึ้นเมื่อเซิร์ฟเวอร์ของคุณส่งคืนไฟล์ HTML (โดยปกติแล้วจะขึ้นต้นด้วย <DOCTYPE html> หรือ <html>) แทนที่จะเป็นไฟล์ JSON ไฟล์ JSON ที่ถูกต้องจะไม่ขึ้นต้นด้วยอักขระ < ดังนั้นตัวแยกวิเคราะห์ (Parser) จะทราบได้ทันทีว่าข้อมูลไม่ใช่ไฟล์ JSON ที่ถูกต้องและจะแสดงข้อความแสดงข้อผิดพลาดตามที่ระบุไว้ด้านบน
คุณจำเป็นต้องทราบว่าเหตุใดคุณจึงได้รับไฟล์ HTML (หรือไฟล์อื่นๆ) แทนที่จะเป็นไฟล์ JSON ตามที่ต้องการเพื่อแก้ไขข้อผิดพลาดนี้ หากต้องการทำเช่นที่กล่าวไป คุณจะต้องบันทึก (Log) ข้อมูลที่คุณต้องการแยกวิเคราะห์ลงในคอนโซล
fetch()
ใช้วิธีการต่อไปนี้หากโค้ดของคุณมีลักษณะคล้ายกับโค้ดต่อไปนี้
fetch('https://example.com/some/path/to/json')
.then(function (response) {
return response.json();
})
.then(function (data) {
// Do something with data
});
ในกรณีนี้ ระบบจะสร้าง (Throw) ข้อผิดพลาดนี้เมื่อ response.json() พยายามทำงานและแยกวิเคราะห์ข้อมูลในรูปแบบ JSON จากเซิร์ฟเวอร์ไม่สำเร็จ คุณสามารถเพิ่มฟังก์ชันเพื่อจัดการกับข้อผิดพลาดและแสดงเฉพาะส่วนบอดี้การตอบกลับจากเซิร์ฟเวอร์เป็นข้อความธรรมดาและบันทึกไว้ในคอนโซลได้ดังนี้ (ดูหมายเหตุเกี่ยวกับบรรทัดคำสั่งที่มีความคิดเห็นได้ที่ด้านล่าง)
var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
responseClone = response.clone(); // 2
return response.json();
})
.then(function (data) {
// Do something with data
}, function (rejectionReason) { // 3
console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
responseClone.text() // 5
.then(function (bodyText) {
console.log('Received the following instead of valid JSON:', bodyText); // 6
});
});
ต่อไปนี้คือคำอธิบายบรรทัดคำสั่งแต่ละบรรทัดที่มีความคิดเห็นตามหมายเลข
responseClone เพื่อเก็บโคลนของออบเจ็กต์ response เนื่องจากระบบสามารถอ่านบอดี้ของ response ได้เพียงครั้งเดียว เมื่อมีการเรียกใช้ response.json() ระบบจะอ่านบอดี้ของ response ต้นแบบ ซึ่งหมายความว่าระบบจะไม่สามารถอ่านโค้ดนี้ได้อีกในขั้นตอนการจัดการข้อผิดพลาดการแยกวิเคราะห์ไฟล์ JSON การโคลน response ให้เป็น responseClone จะสร้างสำเนาของบอดี้การตอบกลับสำหรับใช้งาน 2 ชุด โดยชุดแรกจะเป็น response ต้นแบบสำหรับใช้กับ response.json() และอีกชุดสำหรับใช้กับ responseClone.text() ในกรณีที่ response.json() ใช้งานไม่ได้responseClone โดยใช้โคลนของการตอบกลับที่รับมาจากเซิร์ฟเวอร์ then() หลังจากมีการเรียกใช้ response.json() ระบบจะเรียกใช้ฟังก์ชันที่สองนี้หากมีการปฏิเสธพรอมิส (Promise) จาก response.json() (กล่าวคือ เมื่อพบข้อผิดพลาดกับไฟล์ JSON)rejectionReason จากพรอมิส response.json() และ responseClone ที่ถูกปฏิเสธ สำหรับใช้ตรวจสอบเมื่อจำเป็น (ตัวอย่างเช่น รหัสระบุสถานะ HTTP มักเป็นประโยชน์สำหรับการแก้ไขข้อบกพร่อง)JSON.parse()
ใช้วิธีนี้หากโค้ดที่สร้างข้อผิดพลาดมีลักษณะคล้ายกับโค้ดต่อไปนี้
JSON.parse(data);
ในกรณีนี้ คุณสามารถบันทึกข้อมูลลงในคอนโซลหากพบข้อผิดพลาดเพื่อดูว่ามีข้อมูลอะไรบ้าง ซึ่งอาจปรากฏได้ดังนี้
try {
JSON.parse(data);
}
catch (error) {
console.log('Error parsing JSON:', error, data);
}
เมื่อคุณเห็นข้อมูลที่ทำให้เกิดข้อผิดพลาดการแยกวิเคราะห์ไฟล์ JSON แล้ว ข้อมูลดังกล่าวอาจใช้เป็นเบาะแสเพื่อหาสาเหตุที่คุณไม่ได้รับไฟล์ JSON ที่ถูกต้องตามต้องการได้ ปัญหาที่พบบ่อยซึ่งก่อให้เกิดข้อผิดพลาดนี้มีดังนี้
fetch()