JSON .parse()
การใช้งานทั่วไปของ JSON คือการแลกเปลี่ยนข้อมูลไปยัง/จากเว็บเซิร์ฟเวอร์
เมื่อได้รับข้อมูลจากเว็บเซิร์ฟเวอร์ ข้อมูลจะเป็นสตริงเสมอ
แยกวิเคราะห์ข้อมูลด้วยJSON.parse()
, และข้อมูลจะกลายเป็นวัตถุ JavaScript
ตัวอย่าง - การแยกวิเคราะห์ JSON
ลองนึกภาพเราได้รับข้อความนี้จากเว็บเซิร์ฟเวอร์:
'{"name":"John", "age":30, "city":"New York"}'
ใช้ฟังก์ชัน JavaScript JSON.parse()
เพื่อแปลงข้อความเป็นวัตถุ JavaScript:
const obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
ตรวจสอบให้แน่ใจว่าข้อความอยู่ในรูปแบบ JSON ไม่เช่นนั้น คุณจะได้รับข้อผิดพลาดทางไวยากรณ์
ใช้วัตถุ JavaScript ในหน้าของคุณ:
ตัวอย่าง
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>
Array เป็น JSON
เมื่อใช้JSON.parse()
on JSON ที่ได้มาจากอาร์เรย์ เมธอดจะส่งคืนอาร์เรย์ JavaScript แทนที่จะเป็นออบเจกต์ JavaScript
ตัวอย่าง
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);
ข้อยกเว้น
การแยกวันที่
ไม่อนุญาตให้ใช้วัตถุวันที่ใน JSON
หากคุณต้องการใส่วันที่ ให้เขียนเป็นสตริง
คุณสามารถแปลงกลับเป็นวัตถุวันที่ในภายหลัง:
ตัวอย่าง
แปลงสตริงเป็นวันที่:
const text =
'{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
หรือคุณสามารถใช้พารามิเตอร์ที่สองของJSON.parse()
ฟังก์ชันที่เรียกว่าreviver
พารามิเตอร์ reviver เป็น ฟังก์ชันที่ตรวจสอบคุณสมบัติแต่ละรายการ ก่อนคืนค่า
ตัวอย่าง
แปลงสตริงเป็นวันที่โดยใช้ ฟังก์ชัน reviver :
const text =
'{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
if
(key == "birth") {
return new
Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
ฟังก์ชันการแยกวิเคราะห์
ไม่อนุญาตให้ใช้ฟังก์ชันใน JSON
หากคุณต้องการรวมฟังก์ชัน ให้เขียนเป็นสตริง
คุณสามารถแปลงกลับเป็นฟังก์ชันได้ในภายหลัง:
ตัวอย่าง
แปลงสตริงเป็นฟังก์ชัน:
const text =
'{"name":"John", "age":"function () {return
30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.age();
คุณควรหลีกเลี่ยงการใช้ฟังก์ชันใน JSON ฟังก์ชันต่างๆ จะสูญเสียขอบเขต และคุณจะต้องใช้eval()
เพื่อแปลงกลับเป็นฟังก์ชัน