Cara Mengambil Elemen Array pada JSON menggunakan AJAX jQuery

Pada tutorial kali ini tentang Cara Mengambil Elemen Array pada JSON menggunakan AJAX jQuery kita akan memerlukan dua metode yaiutu metode each() dan getJSON() diman metode getJSON() berfungsi untuk mengambil data JSON dan meotode each() untuk mengambil elemen arraynya yang ada dalam JSON.

Langsung saja saya akan membagikan Cara Mengambil Elemen Array pada JSON menggunakan AJAX jQuery dan di implementasikan pada kasus pengambilan data murid.

Langkah Pertama

Teman-teman buat file index.htmlnya terlebih dahulu. Di sini saya menggunakan framework bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

   <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <p>Klik tombol ambil data di bawah ini untuk mengambil data murid DUMETSCHOOL:</p>
            
            <div id = "stage" class="bg-success" style="padding: 20px">
               <h1>Data Murid DUMETSCHOOL</h1>
            </div>
          
            <input type = "button" id = "driver" value = "Ambil Data" />

        </div>
      </div>
   </div>

  </body>
</html>

Langkah Ke-dua

Buat folder form untuk menyimpan file JSON-nya, lalu buat file json_data.json sebagai berikut

{
	"murid" :[
		{
		"nama": "Zara Ali",
		"jenis_kelamin": "Wanita",
		"umur" : "21",
		"paket_kursus": "Web Master Pro"
		},

		{
		"nama": "Ali Topan",
		"jenis_kelamin": "Pria",
		"umur" : "22",
		"paket_kursus": "Web Master Pro"
		},

		{
		"nama": "Calvin",
		"jenis_kelamin": "Pria",
		"umur" : "23",
		"paket_kursus": "Web Master Pro"
		}

	]
}

Langkah Ke-tiga

Masukan Script di bawah ini untuk mengambil data murid dari data.json yang telah kita buat tadi.

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
      
            $("#driver").click(function(event){
               $.getJSON('form/json_data.json', function(jd) {
                  $.each(jd.murid, function(){
                      $('#stage').append('<p> Nama: ' +this['nama']+ '</p>');
                      $('#stage').append('<p>Jenis Kelamin : '+ this['jenis_kelamin']+ '</p>');
                      $('#stage').append('<p>Usia : ' +this['umur']+ '</p>');
                      $('#stage').append('<p> Paket: ' +this['paket_kursus']+ '</p>');
                  });
               });
            });
        
         });
      </script>
  
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Langkah Terakhir

Teman-teman buka file index.html di browser teman-teman

Lalu klik tombol â€œambil dataâ€ untuk menampilkan data murid

Bagaiman teman-teman cukup mudahkan menggunakan metode getJSON() dan Metode each() pada AJAX jQuery.

Sekian tutorial kali ini tentang Cara Mengambil Elemen Array pada JSON menggunakan AJAX jQuery. Semoga artikel ini bermanfaat bagi teman-teman.

Cara Mengambil Elemen Array pada JSON menggunakan AJAX jQuery

Kategori