JSON.parse()

Penggunaan biasa JSON adalah untuk pengalihan data dengan server web.

Dalam menerima data dari server web, data selalu string.

melalui JSON.parse() Analisis data, data ini akan menjadi objek JavaScript.

Contoh – Menganalisis JSON

Dengarlah, kami menerima teks ini dari server web:

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

Gunakan fungsi JavaScript JSON.parse() Tukar teks kepada objek JavaScript:

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

Pastikan teks ini ditulis dalam format JSON, sebaliknya akan muncul kesalahan sintaks.

Gunakan objek JavaScript di halaman anda:

Contoh

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

亲自试一试

JSON dari server

Anda boleh meminta JSON dari server menggunakan permintaan AJAX.

Sekiranya respons server ditulis dalam format JSON, anda boleh menghurai string kepada objek JavaScript.

Contoh

Gunakan XMLHttpRequest untuk mendapatkan data dari server:

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();

亲自试一试

lihat json_demo.txt

sebagai array JSON

dalam JSON yang diambil dari array JSON.parse() kemudian, kaedah ini akan mengembalikan array JavaScript, bukan objek JavaScript.

Contoh

JSON yang diambil dari server adalah array:

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();

亲自试一试

Lihat json_demo_array.txt

Pengecualian

Parsa tarikh

JSON tidak mengizinkan objek tarikh.

Jika anda perlu mengandungi tarikh, tuliskannya sebagai string.

Kemudian anda boleh mengubahkannya kembali kepada objek tarikh:

Contoh

Tukar string kepada tarikh:

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;

亲自试一试

atau anda boleh gunakan JSON.parse() Parameter kedua fungsi, disebut reviver.

ini reviver Parameter adalah fungsi, sebelum mengembalikan nilai, ia akan memeriksa setiap properti.

Contoh

Tukar string kepada tarikh, gunakan fungsi 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;

亲自试一试

Parsa fungsi

JSON tidak mengizinkan fungsi.

Jika anda perlu mengandungi fungsi, tuliskannya sebagai string.

Kemudian anda boleh mengubahkannya kembali kepada fungsi:

Contoh

Tukar string kepada fungsi:

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