-->
Home
javascript

Cara Menampilkan Data Json Dengan Fetch Javascript

Menampilkan data json dengan fetch
fetch javascript

Oke cuy jadi pada artikel ini gw ingin sedikit berbagi ilmu tentang bagaimana sih cara menampilkan data json dengan menggunakan fetch dari javascript. Dikutip dari medium.com, fetch api pada javascript merupakan kegiatan untuk request layanan ke endpoint yang akan menirima request pada website secara local maupun public.

Jika kalian lihat pada website dokumentasi fetch api tersebut di Fetch_Api , code basicnya seperti contoh di bawah ini
fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));
Sebelumnya, saya telah menyiapkan data dari website jsonplaceholder, kalian bisa cek langsung saja, nah selanjutnya saya juga ingin memberi contoh sederhana dari content ini, saya akan menampilkan data tersebut di dalam tag table atau di dalah tag tbody. 

Cara menampilkan data dengan fetch

<!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.0">
    <title>Fetch Api</title>
</head>

<body>

    <input type="text" id="search" placeholder="search">
    <table border="1">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Email</th>
                <th>Detail</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div id="detail"></div>

    <script>
    </script>
</body>

</html>
Kemudia kita bikin scriptnya, jika code di atas kita terapkan, maka kurang lebih menjadi seperti code di bawah ini.
function loadData() {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((data) => {
    let output = ''
    let no = 1;
    data.forEach(el => {
         output += `
         <tr>
            <td>` + (no++) + `</td>
            <td>${el.name}</td>
            <td>${el.email}</td>
         </tr>
         `
    });
    document.querySelector('tbody').innerHTML = output
  });
}

loadData();
Tapi saya lebih suka menggunakan konsep asynchronous, jadi bagaimana penerapanya? Disini saya memberi contoh beberapa tahapan, yang pertama kita request data dari url yang akan kita gunakan.

Menampilkan data dengan konsep asynchronous Fetch

const tbody = document.querySelector('tbody')
const detail = document.getElementById('detail')
const searchForm = document.getElementById('search')
let usersData = [];

const loadData = async () => {
  try {
    const url = await fetch('https://jsonplaceholder.typicode.com/users');
    usersData = await url.json();
    console.log(usersData)
    loadUserData(usersData);
  } catch (err) {
     console.log(err)
  }
}
loadData();
Pada variabel tbody yang isinya mengambil elemen dari tag tbody pada html diatas, kemudian pada variabel usersData yang berisi array kosong, yang akan menampung data user yang kita gunakan. Kemudian didalam variabel loadData disini saya menggunakan exception handling try catch, didalam blok program try terdapat variabel url yang isinya fetch('xxx') untuk mendapatkan data dari url tersebut, lalu terdapat variabel yang sebelumnya kita buat, kita panggil didalam variabel loadData ini yang isinya untuk mengkonversi json.

BACA JUGA : Cara menampilkan data berdasarkan kategori fetch api

Menampilkan data kedalam table 

Selanjutnya kita buat variabel const baru dengan nama loadUserData, parameternya kita isi dengan data, kurang lebih isi dari code programnya seperti code di bawah.
const loadUserData = (data) => {
	let no = 1;
	const output = data.map((el) => {
		return `
			<tr>
				<td>` + (no++) + `</td>
				<td>${el.name}</td>
				<td>${el.email}</td>
				<td><button onclick='showDetail(${el.id})'>Detail</button></td>
			</tr>
		`
	}).join('')
	tbody.innerHTML = output;
}

karna datanya ingin saya ulang di dalam table, maka dari itu saya menggunakan map untuk mengulang datanya.

Membuat Fungsi Detail

Setelah berhasil menampilkan data, selanjutnya saya ingin membuat fungsi untuk menampilkan detail dari setiap data user tersebut, perhatikan pada code sebelumnya diatas, pada bagian tag <td> paling akhir, saya membuat button yang ketika di klik akan menjalankan fungsi detail, maka dari itu saya akan membuat fungsi detail tersebut, codenya seperti di bawah ini
function showDetail(id) {
  fetch('https://jsonplaceholder.typicode.com/users/' + id)
  .then((res) => res.json())
  .then((data) => {
     detail.innerHTML = ''
     detail.insertAdjacentHTML('beforeend', `
         <ul>
            <li>${data.name}</li>
            <li>${data.username}</li>
            <li>${data.email}</li>
            <li>${data.address.city}</li>
            <li>${data.phone}</li>
         </ul>
        `)
     })
}

Membuat Fitur Pencarian

Selanjutnya jika sudah berhasil menampilkan data dari setiap user, untuk melengkapi program ini rasanya kurang lengkap jika tidak ada filter pencarian data, nah sekarang kita akan membuat filter data, untuk codenya seprti cotoh dibawah.
searchForm.addEventListener('keyup', (e) => {
  const value = e.target.value.toLowerCase();
  const input = usersData.filter((data) => {
    return (
      data.name.toLowerCase().includes(value)
    )
  })
  loadUserData(input)
})

Untuk full source codenya kalian bisa lihat di sini...
Source Code

Post a Comment