JSON.parse(): Cara Membuat dan Contohnya

Penggunaan umum JSON adalah untuk bertukar data ke / dari server web.

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

Parse data dengan JSON.parse(), dan data akan berubah menjadi objek JavaScript.

Section Artikel

1 Contoh – Parsing JSON
2 JSON Dari Server
3 Array sebagai JSON
4 Pengecualian
5 Fungsi Parsing
6 Dukungan Browser

Contoh – Parsing JSON

Anggap kita menerima teks ini dari server web:

'{ "name":"John", "age":30, "city":"New York"}'

Gunakan fungsi JavaScript JSON.parse() untuk mengubah teks menjadi objek JavaScript:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Pastikan teks ditulis dalam format JSON, atau akan terjadi kesalahan sintaks.

Gunakan objek JavaScript di halaman Anda:

<!DOCTYPE html>
<html>
<body>

<h2> Buat Objek dari JSON String </h2>
<p id="demo"></p>

<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

JSON Dari Server

Kita dapat meminta JSON dari server dengan menggunakan permintaan AJAX

Selama respons dari server ditulis dalam format JSON, maka kita dapat mengurai string menjadi objek JavaScript.

Contoh:
Gunakan XMLHttpRequest untuk mendapatkan data dari server:

<!DOCTYPE html>
<html>
<body>

<h2>Gunakan XMLHttpRequest untuk mendapatkan konten file. </h2>
<p>Konten ditulis dalam format JSON, dan dapat dengan mudah diubah menjadi objek JavaScript.</p>

<p id="demo"></p>

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

<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

Array sebagai JSON

Saat menggunakan JSON.parse() pada JSON yang diturunkan dari array, metode ini akan mengembalikan array JavaScript, bukan objek JavaScript.

Contoh:
JSON yang dikembalikan dari server adalah array

<!DOCTYPE html>
<html>
<body>

<h2> Konten sebagai Larik. </h2>
<p> Konten yang ditulis sebagai array JSON akan diubah menjadi array JavaScript. </p>

<p id="demo"></p>

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

<p>Take a look at <a href="json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>
</html>

Pengecualian

Parsing Date
Objek tanggal tidak diperbolehkan di JSON.

Jika perlu memasukkan tanggal, tulislah sebagai string.

kita dapat mengubahnya kembali menjadi objek tanggal nanti.

Contoh:
Ubah string menjadi tanggal

<!DOCTYPE html>
<html>
<body>

<h2> Ubah string menjadi objek tanggal. </h2>
<p id="demo"></p>

<script>
var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Atau, bisa juga menggunakan parameter kedua, dari fungsi JSON.parse(), yang disebut reviver.

Parameter reviver adalah fungsi yang memeriksa setiap properti, sebelum mengembalikan nilainya.

Contoh:
Ubah string menjadi tanggal, menggunakan fungsi reviver.

<!DOCTYPE html>
<html>
<body>

<h2>Ubah string menjadi objek tanggal.</h2>
<p id="demo"></p>

<script>
var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
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; 
</script>

</body>
</html>

Fungsi Parsing

Fungsi tidak diperbolehkan di JSON.

Jika perlu memasukkan fungsi, tulislah sebagai string.

Anda dapat mengubahnya kembali menjadi fungsi nanti.

Contoh:
Ubah string menjadi fungsi

<!DOCTYPE html>
<html>
<body>

<h2>Ubah string menjadi fungsi.</h2>
<p id="demo"></p>

<script>
var text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

Anda harus menghindari penggunaan fungsi di JSON, fungsi akan kehilangan cakupannya, dan menggunakan eval() sebagai gantinya untuk mengubahnya kembali menjadi fungsi.

Dukungan Browser

Fungsi JSON.parse() disertakan di semua browser utama dan dalam standar ECMAScript (JavaScript) terbaru.

Angka-angka dalam tabel di bawah ini menentukan versi browser pertama yang sepenuhnya mendukung fungsi JSON.parse ():

Chrome	Edge	Firefox	Safari	Opera
Ya	8.0	3.5	4.0	10.0

javascript JSON