JSON.parse()

ใช้งานปกติของ JSON คือการเสื่อมส่งข้อมูลกับเซิร์ฟเวอร์ web

ข้อมูลที่รับมาจากเซิร์ฟเวอร์เป็นข้อความเสมอตลอด

ผ่าน JSON.parse() แปลงข้อมูล ที่จะกลายเป็นตัวแปรแบบ JavaScript

ตัวอย่าง – แปลง JSON

ฝันซึ่งเราได้รับข้อความนี้มาจากเซิร์ฟเวอร์ web:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

ใช้ฟังก์ชัน JavaScript JSON.parse() แปลงข้อความเป็นตัวแปรแบบ JavaScript

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

โปรดแน่ใจว่าข้อความนี้เขียนในรูปแบบ JSON ไม่ว่าจะเป็นไรก็ตาม ไม่เช่นนั้นจะมีความผิดพลาดด้านการใช้งานระบบภาษา

ใช้ตัวแปรแบบ JavaScript ในหน้าของคุณ:

ตัวอย่าง

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

ลองด้วยตัวเอง

JSON จากเซิร์ฟเวอร์

คุณสามารถขอ JSON จากเซิร์ฟเวอร์ด้วย AJAX ร้อยละสอง

เมื่อคำตอบจากเซิร์ฟเวอร์เป็นรูปแบบ JSON คุณสามารถแปลงตัวแปรของข้อความเป็นตัวแปรแบบ JavaScript

ตัวอย่าง

ใช้ XMLHttpRequest ที่นี้เพื่อรับข้อมูลมาจากเซิร์ฟเวอร์:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

ลองด้วยตัวเอง

ตรวจสอบ json_demo.txt

ในรูปแบบของตัวแปรแบบเซ็ตต์ของ JSON

ในการใช้ JSON ที่เกิดขึ้นจากตัวแปรแบบเซ็ตต์ JSON.parse() หลังจากนั้น วิธีนี้จะกลับมาให้ตัวแปรแบบเซ็ตต์จาก JavaScript ไม่ใช่ตัวแปรแบบ JSON

ตัวอย่าง

JSON ที่ส่งมาจากเซิร์ฟเวอร์คือตัวแปรแบบนี้

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

ลองด้วยตัวเอง

ดูแบบอื่นใน json_demo_array.txt

ความหลากหลาย

แปลงวันที่

JSON ไม่อนุญาตให้มีวันที่ตัวแปร。

ถ้าคุณต้องการที่จะมีวันที่ โปรดเขียนมันเป็นข้อความ。

หลังจากนั้นคุณสามารถแปลงมันกลับเป็นวันที่ตัวแปรได้:

ตัวอย่าง

จะแปลงข้อความเป็นวันที่:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

ลองด้วยตัวเอง

หรือคุณสามารถใช้ JSON.parse() ตัวเลือกที่สองของฟังก์ชัน หรือที่เรียกว่า reviver。

นี้ reviver ตัวเลือกคือฟังก์ชัน ซึ่งก่อนที่จะส่งค่ากลับมา จะตรวจสอบแต่ละของรายการ。

ตัวอย่าง

แปลงข้อความเป็นวันที่ โดยใช้ฟังก์ชัน reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var 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 ไม่อนุญาตให้มีฟังก์ชัน。

ถ้าคุณต้องการที่จะมีฟังก์ชัน โปรดเขียนมันเป็นข้อความ。

หลังจากนั้นคุณสามารถแปลงมันกลับเป็นฟังก์ชันได้:

ตัวอย่าง

จะแปลงข้อความเป็นฟังก์ชัน：

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

ลองด้วยตัวเอง

คุณควรหลีกเลี่ยงการใช้ฟังก์ชันใน JSON ฟังก์ชันจะสูญเสียที่ส่วนของดินแดนของมัน และคุณจะต้องใช้ eval() แปลงฟังก์ชันกลับเป็นฟังก์ชัน

การสนับสนุนเบราเซอร์

ทุกเบราเซอร์หลักและมาตรฐาน ECMAScript (JavaScript) ที่สุดท้ายทุกตัวที่มีความสามารถ JSON.parse() ฟังก์ชัน:

ตัวเลขในตารางด้านล่างนี้นำไปบอกว่าฟังก์ชันนี้เป็น JSON.parse() เบราเซอร์ฉบับแรกที่สามารถใช้ฟังก์ชันได้

Yes 8.0 3.5 4.0 10.0

สำหรับเบราเซอร์ที่เก่ากว่า ลิบรารี JavaScript ที่อยู่ในที่ตั้งด้านล่างนี้สามารถใช้ได้

https://github.com/douglascrockford/JSON-js