Selamat datang kembali di blog Mari belajar koding. Jika kemarin kita telah berhasil parsing data json menggunakan php dengan cara file_get_contents dan curl untuk mengakses file json nya, kali ini kita akan belajar parsing data json dengan javascript. Saat kita melakukan permintaan data atau pertukaran data json dari web server, data yang diterima berbentuk string. Maka dari itu kita perlu parsing data json menjadi data objek atau array asosiatif agar dapat diolah di sisi klien. Ada beberapa cara parsing data json dengan javascript, yaitu dengan javascript XMLHttpRequest dan Ajax jquery.
Parsing Data JSON dengan Javascript
[
{
"nim":"1234",
"nama":"Agung Saputra",
"alamat":"Semarang",
"jurusan":"Teknik Informatika",
"MK":[
{
"mk_kode":"101",
"nama_mk":"SISTEM BASIS DATA"
},
{
"mk_kode":"102",
"nama_mk":"ALJABAR LINIER"
},
{
"mk_kode":"103",
"nama_mk":"ANALISA ALGORITMA"
},
{
"mk_kode":"104",
"nama_mk":"KECERDASAN BUATAN"
},
{
"mk_kode":"105",
"nama_mk":"JARINGAN KOMPUTER"
}
]
},
{
"nim":"1236",
"nama":"Mirani Rahmawati",
"alamat":"Pemalang",
"jurusan":"Sistem Informasi",
"MK":[
{
"mk_kode":"301",
"nama_mk":"ANALISA PROSES BISNIS"
},
{
"mk_kode":"302",
"nama_mk":"DATABASE TERDISTRIBUSI"
},
{
"mk_kode":"303",
"nama_mk":"ETIKA PROFESI"
},
{
"mk_kode":"304",
"nama_mk":"REKAYASA WEB"
},
{
"mk_kode":"305",
"nama_mk":"AUDIT SISTEM INFORMASI"
}
]
}
]Akses data json menggunakan XMLHttpRequest
Karena kali ini kita akan mengakses data json dengan javascript tanpa script php, buat file latihan.html untuk menampilkan data json.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
var data=JSON.parse(xhttp.responseText);
console.log(data);
}
};
xhttp.open("GET", "data.json", true);
xhttp.send();
</script>
</head>
<body>
</body>
</html>Jalankan di browser kemudian lihat dibagian console log. data json akan di tampilkan menjadi data objek.
Keterangan:
- XMLHttpRequest digunakan untuk meminta data dari server web.
- onreadystatechange menentukan fungsi yang akan dieksekusi setiap kali status objek XMLHttpRequest berubah.
- Ketika properti readyState nya 4 dan properti status nya 200, response is ready.
- Properti responseText mengembalikan respons server sebagai string teks
- JSON.parse() mengubah data string menjadi objek. kebalikan dari JSON.parse() yaitu JSON.stringify() mengubah data objek array menjadi json.
Untuk menampilkan data objek di tampilan browser, teman-teman bisa menggunakan innerHTML atau menggunakan append(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data=JSON.parse(xhttp.responseText);
data.forEach(function(element) {
document.getElementById("demo").innerHTML +="NIM :" + element.nim + "<br>Nama :" + element.nama + "<br>Alamat :" + element.alamat + "<br><br>";
});
}
};
xhttp.open("GET", "data.json", true);
xhttp.send();
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>Jalankan dibrowser, data objek akan ditampilkan menggunakan innerhtml.
Akses data json menggunakan Ajax Jquery
Buat file latihan2.html
Karena kita menggunakan jquery maka panggil terlebih dahulu jquerynya, letakan di bagian head.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript">
$.getJSON("data.json", function(result){
console.log(result);
});
</script>
</head>
<body>
</body>
</html>Jalankan di browser, kemudian lihat dibagian console log. data json akan di tampilkan menjadi data objek.
Keterangan:
Metode getJSON() digunakan untuk mendapatkan data json menggunakan permintaan get http ajax.
Untuk menampilkan data objek di tampilan browser, teman-teman bisa menggunakan innerHTML atau menggunakan append(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript">
$.getJSON("data.json", function(result){
console.log(result);
$.each(result, function(i){
document.getElementById("demo").innerHTML +="NIM :" + result[i].nim + "<br>Nama :" + result[i].nama + "<br>Alamat :" + result[i].alamat + "<br><br>";
});
});
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
Jalankan dibrowser, data objek akan ditampilkan menggunakan innerhtml.
Tutorial parsing data json dengan javascript sampai disini. Sekian, semoga bermanfaat.
Related Search:
- Parsing data JSON menggunakan Javascript
- Parsing data JSON with xmlhttprequest
- Parsing data JSON with ajax
- Parsing data JSON with getJSON
- Menampilkan data JSON dengan Javascript
- Mengambil data json di javascript