Parsing Data JSON dengan Javascript - Mari Belajar Coding -->

Selasa, 26 Maret 2019

Parsing Data JSON dengan Javascript


Parsing Data JSON dengan Javascript

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

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.
<!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.
Parsing Data JSON dengan Javascript

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.
Parsing Data JSON dengan Javascript

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.
Parsing Data JSON dengan Javascript

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.
Parsing Data JSON dengan Javascript

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

Related Posts

Load comments