การรับ JSON ผ่าน AJAX ใน JavaScript

เป็นวิธีปฏิบัติทั่วไปที่เซิร์ฟเวอร์จะส่งข้อมูลในรูปแบบ JSON. มาดูวิธีการทำงานกับมันกัน สมมติว่ามีไฟล์ต่อไปนี้บนเซิร์ฟเวอร์:

{
	"num1": "1",
	"num2": "2"
}

มาดูการรับข้อมูลจากไฟล์นี้กัน:

button.addEventListener('click', function() {
	fetch('/data.json').then(response => {
		return response.text();
	}).then(data => {
		console.log(JSON.parse(data));
	});
});

คุณสามารถใช้เมธอด json เพื่อให้ JSON ถูกแปลงเป็นโครงสร้าง JavaScript โดยอัตโนมัติ:

button.addEventListener('click', function() {
	fetch('/data.json').then(response => {
		return response.json();
	}).then(data => {
		console.log(data);
	});
});

สมมติว่าเซิร์ฟเวอร์ส่งคืน JSON ที่มีอาร์เรย์ วนลูปผ่านอาร์เรย์นี้และเขียนแต่ละองค์ประกอบลงใน li แยกกัน