Kamu sudah punya endpoint API yang mengembalikan daftar pengguna, produk, atau transaksi, tapi datanya masih berupa JSON mentah di tab browser. Cara menampilkan data API ke tabel HTML dengan jQuery adalah langkah paling umum untuk mengubah respons itu jadi tabel yang bisa dibaca tim. Prosesnya berjalan dalam empat tahap: ambil data dengan AJAX, periksa strukturnya, susun baris tabel, lalu sisipkan ke elemen yang sudah ada di halaman.
Menyiapkan struktur HTML dan endpoint
Sebelum menulis JavaScript, siapkan kerangka tabel dengan header yang sudah pasti kolomnya. jQuery akan mengisi bagian <tbody> saja, sehingga header tidak perlu dibangun ulang setiap kali data dimuat. Berikut struktur minimalnya.
<table id="tabel-pengguna">
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Kota</th>
</tr>
</thead>
<tbody id="isi-tabel"></tbody>
</table>
<p id="status-muat">Memuat data...</p>Perhatikan dua id yang dipakai: satu untuk tabel, satu untuk elemen status. Elemen status berguna saat request belum selesai, dan nanti akan diubah isinya jika terjadi kegagalan. Jangan lupa memuat jQuery sebelum skrip buatanmu, baik dari CDN maupun file lokal.
Mengambil data dengan $.ajax
Metode $.ajax memberi kendali lebih lengkap dibanding $.getJSON, terutama untuk menangani error dan mengatur timeout. Struktur respons yang paling sering ditemui adalah array di properti tertentu, misalnya data atau results.
$.ajax({
url: 'https://api.contoh.com/pengguna',
method: 'GET',
dataType: 'json',
timeout: 8000,
success: function (respons) {
const daftar = respons.data || [];
renderTabel(daftar);
},
error: function (xhr, status) {
$('#status-muat').text('Gagal memuat data: ' + status);
},
complete: function () {
// tempat menutup indikator loading
}
});Baris respons.data || [] mencegah error ketika API mengembalikan objek tanpa properti yang diharapkan. Kalau struktur API-mu berbeda, sesuaikan bagian ini saja, sisa kode di bawah tetap bisa dipakai.
Memeriksa bentuk respons sebelum menyusun baris
Buka endpoint di tab browser atau alat seperti Postman, lalu lihat apakah hasilnya array langsung, array bersarang, atau objek dengan metadata paginasi. Perbedaan ini menentukan cara kamu mengiterasi data. Kalau hasilnya bersarang, misalnya respons.data.items, ambil properti terdalamnya lebih dulu sebelum masuk ke fungsi render.
Menyusun baris tabel dari data
Fungsi render menerima array, lalu membangun string HTML untuk setiap baris. Pendekatan ini lebih cepat dibanding menambahkan elemen satu per satu ke DOM di dalam loop.
function renderTabel(daftar) {
const $tbody = $('#isi-tabel');
$tbody.empty();
if (daftar.length === 0) {
$tbody.append('<tr><td colspan="3">Tidak ada data.</td></tr>');
$('#status-muat').text('');
return;
}
let baris = '';
$.each(daftar, function (i, item) {
baris += '<tr>';
baris += '<td>' + item.nama + '</td>';
baris += '<td>' + item.email + '</td>';
baris += '<td>' + item.kota + '</td>';
baris += '</tr>';
});
$tbody.append(baris);
$('#status-muat').text('');
}Selalu panggil .empty() di awal supaya data lama tidak menumpuk ketika fungsi ini dijalankan ulang, misalnya setelah pengguna menekan tombol muat ulang atau mengganti halaman paginasi.
Menangani nilai kosong dan tipe data
API tidak selalu mengirim semua field. Sebagian mengembalikan null, string kosong, atau bahkan melewatkan properti tertentu. Tambahkan pemeriksaan sederhana sebelum menyusun sel.
function teksAman(nilai) {
if (nilai === null || nilai === undefined || nilai === '') {
return '<span class="kosong">-</span>';
}
return $('<div>').text(String(nilai)).html();
}Fungsi ini mengubah nilai apa pun menjadi teks, lalu meng-escape karakter khusus lewat $('<div>').text(...).html(). Langkah ini penting karena data dari API bisa berisi karakter yang jika disisipkan mentah akan merusak struktur HTML atau membuka celah XSS.
Menambahkan loading state dan tombol muat ulang
Tabel yang kosong selama beberapa detik membuat pengguna mengira halaman rusak. Tampilkan pesan status sejak awal, lalu hapus setelah data masuk. Pola ini juga memudahkan debugging karena kamu tahu request mana yang masih berjalan.
- Tampilkan teks “Memuat data…” sebelum request dikirim.
- Kosongkan teks tersebut di blok
successmaupunerrorlewatcomplete. - Sembunyikan tabel dan tampilkan pesan bila daftar kosong, supaya header tidak menggantung tanpa isi.
- Bungkus proses pengambilan data dalam satu fungsi agar bisa dipanggil ulang dari tombol.
Dengan memisahkan fungsi muatData(), kamu cukup memanggilnya kembali saat pengguna ingin memperbarui isi tabel, tanpa menyalin kode AJAX yang sama.
Merapikan tabel dengan plugin ringan
Ketika kolom bertambah dan data mulai ratusan baris, pengurutan serta pencarian manual jadi merepotkan. Beberapa plugin jQuery seperti DataTables atau FooTable bisa dipasang di atas tabel yang sudah jadi. Syaratnya, struktur HTML tetap valid: satu <thead>, satu <tbody>, dan jumlah kolom yang konsisten di setiap baris. Plugin ini membaca DOM yang sudah dirender, jadi urutan pemanggilannya adalah render data dulu, inisialisasi plugin setelahnya.
Kalau kebutuhanmu masih sekadar menampilkan data tanpa filter, tabel HTML biasa sudah cukup. Menambah plugin hanya menambah dependensi yang harus dirawat.
Kesalahan yang sering terjadi
Data tidak muncul meski request berhasil biasanya karena tiga hal. Pertama, nama properti tidak sesuai dengan respons asli, misalnya menulis respons.data padahal API mengembalikan array langsung. Kedua, id elemen <tbody> salah ketik sehingga append tidak mengenai target. Ketiga, skrip dijalankan sebelum DOM siap, sehingga $('#isi-tabel') mengembalikan koleksi kosong. Bungkus seluruh kode di dalam $(document).ready(function () { ... }) untuk menghindari masalah terakhir.
Masalah lain yang muncul di lingkungan produksi adalah CORS. Kalau request diblokir browser dengan pesan tentang header Access-Control-Allow-Origin, itu urusan konfigurasi server, bukan kode jQuery-mu. Solusi sementara biasanya lewat proxy di sisi backend.
Ringkasan
Alur menampilkan data API ke tabel HTML dengan jQuery terdiri dari pengambilan data lewat $.ajax, pemeriksaan bentuk respons, penyusunan string baris, dan penyisipan ke <tbody>. Tambahkan escape karakter, penanganan nilai kosong, dan status loading agar tabel tetap enak dipakai ketika data gagal dimuat. Setelah alur dasar ini jalan, kamu bisa menambahkan paginasi atau kolom pencarian sesuai kebutuhan.
Pertanyaan yang Sering Diajukan
Apakah masih relevan memakai jQuery untuk mengambil data API?
Untuk proyek yang sudah memakai jQuery, menambahkan fetch atau axios hanya menambah satu cara lagi yang harus dirawat. jQuery tetap berfungsi baik untuk request sederhana, terutama karena $.ajax sudah menangani timeout dan error dengan API yang konsisten di berbagai browser.
Bagaimana cara menampilkan data yang jumlahnya ribuan baris?
Merender ribuan baris sekaligus membuat browser berat. Pakai paginasi di sisi server, lalu minta hanya satu halaman data per request. Kalau paginasi server tidak tersedia, potong array di sisi klien dan render sebagian baris saja, sisanya dimuat saat pengguna mengganti halaman.
Kenapa karakter tertentu tampil sebagai kode aneh di tabel?
Biasanya karena data disisipkan mentah ke string HTML. Escape nilai dengan mengubahnya jadi teks lewat .text() sebelum disisipkan, seperti pada fungsi teksAman di atas. Cara ini juga mencegah skrip dari luar ikut tereksekusi di halamanmu.