Bab 17: Latihan AJAX + JSON jQuery – Mengambil dan Menampilkan Data Dinamis

Bab 17: Latihan AJAX + JSON jQuery – Mengambil dan Menampilkan Data Dinamis

Setelah mempelajari AJAX Dasar dan AJAX Lanjutan, sekarang saatnya praktik mengambil dan menampilkan data JSON menggunakan jQuery. JSON adalah format data yang umum digunakan untuk komunikasi antara client dan server.

Latihan ini membantu memahami:

  • Mengambil data dari file JSON atau API
  • Menampilkan data di HTML secara dinamis
  • Menangani response AJAX dengan benar

1. Contoh File JSON

Buat file bernama data.json:

[
  { "id": 1, "nama": "Andi", "umur": 25 },
  { "id": 2, "nama": "Budi", "umur": 30 },
  { "id": 3, "nama": "Citra", "umur": 28 }
]

2. Mengambil Data JSON dengan AJAX

Gunakan method .getJSON() untuk mengambil data JSON.

$.getJSON("data.json", function(data){
  $.each(data, function(index, item){
    $("#result").append("<p>" + item.id + ". " + item.nama + " (" + item.umur + " tahun)</p>");
  });
});
  • $.each() digunakan untuk looping semua item
  • item.id, item.nama, item.umur → mengakses property JSON

3. Contoh Lengkap Latihan AJAX + JSON

<!DOCTYPE html>
<html>
<head>
  <title>Latihan AJAX + JSON jQuery</title>
</head>
<body>

<h2>Daftar Pengguna</h2>
<div id="result"></div>
<button id="btnLoad">Load Data</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
  $("#btnLoad").click(function(){
    $.getJSON("data.json", function(data){
      $("#result").empty(); // bersihkan dulu container
      $.each(data, function(index, item){
        $("#result").append("<p>" + item.id + ". " + item.nama + " (" + item.umur + " tahun)</p>");
      });
    }).fail(function(){
      alert("Gagal mengambil data JSON!");
    });
  });
});
</script>

</body>
</html>

Penjelasan:

  1. Tombol Load Data akan memicu request AJAX ke data.json.
  2. Response JSON di-loop menggunakan $.each() dan ditampilkan di #result.
  3. Menggunakan .empty() agar data lama dibersihkan sebelum menampilkan data baru.
  4. .fail() digunakan untuk menangani error request.

4. Tips dan Best Practice

  • ❌ Selalu gunakan .empty() sebelum menambahkan data baru agar tidak menumpuk
  • ❌ Tangani error dengan .fail() agar pengguna tahu jika request gagal
  • ❌ Gunakan selector caching untuk elemen yang sering digunakan
  • ❌ Pastikan file JSON valid agar parsing tidak gagal

5. Kesimpulan

Pada Bab 17: Latihan AJAX + JSON jQuery, Anda telah belajar:

  • Mengambil data JSON menggunakan .getJSON()
  • Menampilkan data secara dinamis di halaman HTML
  • Menggunakan $.each() untuk looping setiap item
  • Menangani error request

Latihan ini sangat penting sebagai dasar untuk membangun aplikasi web interaktif yang memanfaatkan API atau database server.

Related Posts