Cara Load Data JSON Menggunakan Metode Ajax getJSON

Selamat sore teman-teman semua disini, seperti biasa untuk kali ini saya akan memberikan sebuah tutorial lagi dimana untuk kali ini kita akan belajar cara load data JSON menggunakan metode Ajax getJSON, seperti yang kita ketahui dengan mengguankan data JSON kita di suguhkan banyak manfaat di samping proses jauh lebih cepat, untuk keunggulan / keuntungan menggunakan data JSON teman-teman bisa searching sendiri ya di google, oke seperti apa cara membuatnya simak terus ya teman-teman.

oke mungkin untuk artikel ini saya tidak menjelaskan lebih jauh tentang JSON yang jelas JSON sendiri adalah untuk menyimpan suatu data ya selain kita bisa menggunakan MySQL dan JSON Sendiri kita bisa gunakan di bahasa pemrograman apa saja, dan disini juga saya akan mencontohkan bagaimana kita bisa mengambil data JSON tersebut dengan sebuah Ajax, panasaran bukan bagaimana cara load data JSON menggunakan metode Ajax getJSON, langsung saja teman-teman siapkan data JSONya teman-teman bisa menyimpannya dengan extension .json ya, seperti ini:

 [  
      {  
           "judul_buku":"The Gutenberg Bible"  
      },  
      {  
           "judul_buku":"Shakespeare's First Folio"  
      },  
      {  
           "judul_buku":" Edgar Allan Poe's 'Tamerlane and Other Poems'"  
      },  
      {  
           "judul_buku":"Leonardo da Vinci's Codex Leicester"  
      },  
      {  
           "judul_buku":"John James Audubon's 'Birds of America'"  
      },  
      {  
           "judul_buku":"Ptolemy's 'Geographia'"  
      },  
      {  
           "judul_buku":"John Calvin's 'Institutes of the Christian Religion'"  
      },  
      {  
           "judul_buku":"Arthur Rimbaud's 'A Season in Hell'"  
      },  
      {  
           "judul_buku":"The Sarajevo Haggadah"  
      },  
      {  
           "judul_buku":"Fyodor Solntsev's 'Antiquities of the Russian State'"  
      },  
      {  
           "judul_buku":"The Viviparous Quadrupeds of North America"  
      }  
 ]

Oke seperti itu jadi disini kita akan meload data, dimana saya membuat sebuah data JSON data buku ya, teman-teman bisa buat sesuka teman-teman ya, oke langsung saja proses dan templatenya karena disini saya akan menggunakan ajax jadi disini saya akan butuh ajax jquery jadi seperti ini

<!DOCTYPE html>  
<html>  
<head>  
     <title>Data JSON</title>  
     
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>  
<body>  
 <div class="container">
   <div class="row">
     <div class="col-md-8 offset-md-2">
     <h3 class="text-center">Cara Load Data JSON menggunakan Metode Ajax getJSON</h3>  
      <button class="btn btn-success">Load Judul Buku</button>  
      <table class="table table-bordered mt-4" style="display:none;">  
           <tr>  
                <th>Judul Buku</th>  
           </tr>  
      </table>  
     </div>
   </div>
 </div>
</body>  
</html>  
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
<script>  
$(document).ready(function(){  
  $("button").click(function(){ 
   $("table").html("");
   $("table").show();  
   $.getJSON("data.json", function(data){  
        $.each(data, function(key, value){  
             $("table").append("<tr><td>"+value.judul_buku+"</td></tr>");  
        });  
   });  
  });  
});  
</script>

Oke seperti judulnya jadi di sini tidak hanya load, get dan POST tetapi disini kita bisa menggunakan getJSON untuk mengambil data khusus untuk JSON, jika kita lihat hasilnya akan seperti ini:

gambar pertama di atas sebelum kita load dan yang kedua setelah kita load, keren bukan seperti itu lah jadi banyak cara ketika kita ingin meload sebuah data, salah satunya dengan menggunakan getJSON oke sampai disini saja belajar kita tentang cara load data JSON menggunakan metode Ajax getJSON, dan artikel kali ini saya dapat dari youtube weblesson, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Load Data JSON Menggunakan Metode Ajax getJSON

Kategori