JSON.parse()

Penggunaan biasa JSON adalah untuk transmisi data dengan server web.

Saat menerima data dari server web, data selalu berupa string.

dengan JSON.parse() urai data, yang akan menjadi objek JavaScript.

Contoh – Mengurai JSON

Berikan gambaran seperti ini, yang kami terima dari server web:

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

Gunakan fungsi JavaScript JSON.parse() Konversi teks ke 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>

Coba Sendiri

JSON dari server

Anda dapat meminta JSON dari server menggunakan permintaan AJAX.

Jika tanggapan server ditulis dalam format JSON, Anda dapat mengkonversi string menjadi 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();

Coba Sendiri

lihat json_demo.txt

sebagai array JSON

pada penggunaan JSON yang berasal dari array JSON.parse() setelah itu, metode 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();

Coba Sendiri

Lihat json_demo_array.txt

Kasus khusus

Mengurai tanggal

JSON tidak mengizinkan objek tanggal.

Jika Anda perlu menyertakan tanggal, tulisnya sebagai string.

Kemudian Anda dapat mengembalikan ke objek tanggal:

Contoh

Mengubah string ke tanggal:

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

Coba Sendiri

atau Anda dapat menggunakan JSON.parse() Parameter kedua fungsi, disebut reviver.

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

Contoh

Mengubah string ke tanggal, menggunakan 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;

Coba Sendiri

Mengurai fungsi

JSON tidak mengizinkan fungsi.

Jika Anda perlu menyertakan fungsi, tulisnya sebagai string.

Kemudian Anda dapat mengembalikan ke fungsi:

Contoh

Mengubah string ke fungsi:

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

Coba Sendiri

Anda seharusnya menghindari penggunaan fungsi di JSON, fungsi akan kehilangan lingkungan mereka, dan Anda masih perlu menggunakan eval() Tukarkan kembali ke fungsi.

Dukungan Browser

Semua browser utama serta standar ECMAScript (JavaScript) terbaru termasuk JSON.parse() Fungsi:

Angka di tabel di bawah menunjukkan dukungan penuh JSON.parse() Versi browser pertama fungsi:

Ya 8.0 3.5 4.0 10.0

Untuk browser yang lama, berikut adalah pustaka JavaScript yang tersedia di alamat ini:

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