Cara Menampilkan Data Berdasarkan Kategori Dengan Fetch API

Menampilkan data berdasarkan kategori

Cara menampilkan data berdasarkan kategori yang dipilih | Fetch API - Pada artikel kali ini dalam pembuatan cara menampilkan data berdasarkan kategori, yang masih masih bersangkutan dengan artikel yang sebelumnya.

Tanpa basa-basi lagi, berikut adalah cara untuk menampilkan data berdasarkan kategori yang dipilih menggunakan fetch api : 

Membuat Element HTML

Dibagian ini saya membuat element html terlebih dahulu, yang nantinya akan menampilkan data yang dijalankan dengan fetch api, sebelumnya saya juga telah memiliki data json, jika teman-teman ingin menggunakan data jsonya, kalian bisa kunjugin link berikut ini.

Kemudian, untuk kodenya berisikan seperti dibawah ini

<div id="kategori"></div>

<table border="1">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>kategori</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">NO DATA SELECTED</td>
        </tr>
    </tbody>
</table>

Pada tag div#kategori atau id kategori, nanti akan menampilkan data-data kategori, seperti baju & celana.

Menampilkan Data Kategori Menggunakan Fetch

Pada bagian ini saya akan membuat script untuk menampilkan data kategori kedalam div yang memiliki id kategori. Codenya berisikan seperti dibawah ini.

<script>
    let kategoriData = [];

    const loadData = async () => {
        try {
            const url = await fetch('https://my-json-server.typicode.com/wahidunutas/fakeapi/category');
            kategoriData = await url.json();
            loadDataKategori(kategoriData);
        } catch (err) {
            console.log(err)
        }
    }

    const loadDataKategori = (data) => {
        const output = data.map((el) => {
            return `
                <ul>
                    <li><a href="#" onclick='loadMyData("${el.id}")'>${el.name}</a></li>
                </ul>
                 `
        }).join('')
        document.getElementById("kategori").innerHTML = output;
    }
        
        
    loadData();
</script>

variabel let kategori data yang berisikan array kosong, kemudian saya membuat variabel const loadData yang mengambil data melalui url tersebut, dan didalam kondisi try berisi variabel loadDataKategori. 

Kemudian pada variabel const loadDataKategori yang yang memiliki parameter data didalamnya saya ulang menggunakan map untuk menampilkan data kategori yang di tampung di dalam variabel const output, didalam perulangan tersebut terdapat tag ul li a, pada tag a saya sisipkan atribut yang isinya fungsi daripada loadMyData (yg belum dibuat), jadi ketika link tersebut di klik, akan menjalankan fungsi yang namanya loadMyData. Jika dilihat pada browser, maka tampilanya akan seperti gambar dibawah.

Data Kategori

Membuat Fugsi loadMyData()

*Menampilkan data berdasarkan kategori yang dipilih

Setelah variabel const loadDataKategori, selanjutnya saya membuat fungsi loadMyData yang memili parameter id, dan mengambil data melalui link yang tersedia. Codenya seperti dibawah ini.

function loadMyData(id) {
    fetch('https://my-json-server.typicode.com/wahidunutas/fakeapi/data?kategori.id=' + id)
    .then((res) => res.json())
    .then((data) => {
        let ktg = ''
        let no = 1;
        data.forEach(element => {
            ktg += `
            <tr>
                <td>` + (no++) + `</td>
                <td>${element.name}</td>
                <td>${element.kategori.nama}</td>
            </tr>
        `
        });
        document.querySelector("tbody").innerHTML = ktg
    })
}

Dalam fungsi ini, saya mengambil data dengan fetch dari url tersebut, namun bagian urlnya saya berikan kondisi seperti ?kategori.id=' + id, jadi dimana data yang memiliki id kategori yang sama dengan data kategori diatas, maka akan menampilkan data yang sesuai yang di ulang dengan foreach dan di tampilkan pada tag tbody.

Kalau dilihat pada browser dan dipilih salah satu kategori, maka akan tampil seperti gambar di bawah ini.

Data kategori selected

Full Source Code

<div id="kategori"></div>

    <table border="1">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>kategori</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">NO DATA SELECTED</td>
            </tr>
        </tbody>
    </table>


    <script>
        let kategoriData = [];

        const loadData = async () => {
            try {
                const url = await fetch('https://my-json-server.typicode.com/wahidunutas/fakeapi/category');
                kategoriData = await url.json();
                console.log(kategoriData)
                loadDataKategori(kategoriData);
            } catch (err) {
                console.log(err)
            }
        }

        const loadDataKategori = (data) => {
            const output = data.map((el) => {
                return `
                    <ul>
                        <li><a href="#" onclick='loadMyData("${el.id}")'>${el.name}</a></li>
                    </ul>
                    `
            }).join('')
            document.getElementById("kategori").innerHTML = output;
        }

        function loadMyData(id) {
            fetch('https://my-json-server.typicode.com/wahidunutas/fakeapi/data?kategori.id=' + id)
                .then((res) => res.json())
                .then((data) => {
                    let ktg = ''
                    let no = 1;
                    data.forEach(element => {
                        ktg += `
                        <tr>
                            <td>` + (no++) + `</td>
                            <td>${element.name}</td>
                            <td>${element.kategori.nama}</td>
                        </tr>
                    `
                    });
                    document.querySelector("tbody").innerHTML = ktg
                })
        }

        loadData();
    </script>

Sekian dari artikel yang saya mengenai bagaimana cara untuk menampilkan data berdasarkan kategori yang dipilih menggunakan fetch api, jika ada kesalahan penulisan kode atau ingin bertanya-tanya teman-teman bisa corat-coret di kolom komentar, hehe.