- Cari disini...
- Browse
Katalog Kelas
Ikuti materi yang kamu butuhkan
Roadmap
Belajar online dengan terarah
Bootcamp
Codepolitan x Catamyst
- Explore
Tutorial & Artikel
Temukan Artikel menarik
Podcast
Podcast seputar pemrograman
Webinar
Ikuti Berbagai Webinar
Event
Temukan Event menarik
Beasiswa
Program Beasiswa
Discord
Komunitas Discord
Forum
Diskusi antar Programmer
Leaderboard
Ranking siswa Codepolitan
- Partnership
For Company
Solusi tepat untuk perusahaan
For School
Kerjasama untuk sekolah
For Campus
Kerjasama untuk kampus
For Mentor
Peluang penghasilan untuk mentor
- Career
LoginRegister
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
Buat data jsonnya terlebih dahulu di directory htdocs, salin kode dibawah ini kemudian simpan dengan nama data.json
[ { "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.
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.
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:
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