Cara menggunakan JSON-SIMPLE pada JavaScript

Question

Table of Contents Show

Apa itu JSON JS?
JSON digunakan untuk apa?
Apa itu JSON dan contohnya?
Apa penggunaan umum JSON di situs web modern?

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.

<!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

Apa itu JSON JS?

JSON (JavaScript Object Notation) adalah sebuah format data yang digunakan untuk pertukaran dan penyimpanan data. JSON merupakan bagian (subset) dari Javascript. JSON bisa dibaca dengan berbagai macam bahasa pemrograman seperti C, C++, C#, Java, Javascript Perl, Python, dan banyak lagi.

JSON digunakan untuk apa?

Jadi, JSON adalah singkatan dari JavaScript Object Notation merupakan suatu format yang digunakan untuk menyimpan, membaca, serta menukar informasi dari web server sehingga dapat dibaca oleh para pengguna.

Apa itu JSON dan contohnya?

JSON (JavaScript Object Notation) adalah sebuah format untuk menyimpan dan menukar informasi yang dapat dibaca oleh manusia. Filenya hanya memuat teks dan berekstensikan .json. Pada artikel ini, Anda akan mempelajari tentang apa itu JSON, kegunaannya, dan juga bagaimana JSON dapat meningkatkan performa website Anda.

Apa penggunaan umum JSON di situs web modern?

JSON adalah format yang digunakan dalam penyimpanan dan transfer data, terutama dalam aplikasi web. Format ini makin sering digunakan karena struktur kode yang lebih ringkas dan mudah dipahami daripada XML.

kode javascript JSON parse JavaScript String to JSON JSON Stringify Online JSON format