Cara Memasukan Data API ke dalam Table di EJS Template

Sudah berhasil menarik API namun bingung bagaimana menampilkannya dengan table di EJS ?

Bingung memasukan API ke table ?

Jika pertanyaan kalian seperti pertanyaan diatas, selamat karena pada artikel kali ini BapakNgoding akan membahas mengenai bagaimana Cara Memasukan Data API ke dalam Table di EJS Template.
Sebelum kita masuk ke pokok pembahasan kita harus tahu dulu apa itu EJS ?.
EJS adalah salah satu template engine atau view pada NodeJS yang dimana EJS sendiri adalah front-end.

Sumber :
https://www.geeksread.com/wp-content/uploads/2018/06/EJS-Conditionals-and-Loops.png

Nah setelah kita tahu apa itu EJS, langsung saja kita ke pokok pembahasan.
Saat kita ingin membuat sebuah website entah bisnis, toko atau apapun yang menggunakan table maka kita pasti akan memasukan data dari API tersebut ke dalam table yang kita miliki, nah pada saat memasukan itulah kebanyakan orang akan bingung bagaimana caranya terutama bagi yang baru tau atau baru mengenal DOM (Document Object Mode), nah karena persoalan itulah kali ini BapakNgoding akan memberitahu caranya memasukan data dari API ke dalam Table dengan DOM.

Tanpa panjang lebar lagi beginilah caranya:

1. Asumsikan kita sudah mempunyai API dengan response berikut :

{ "result": [ { "id": 5, "date": "2019-10-28T17:00:00.000Z", "size": "40FT", "no_count": "sadsasadc", "tujuan": "sdsaassa", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 8, "date": "2019-10-27T17:00:00.000Z", "size": "40FT", "no_count": "sadsasad", "tujuan": "asd", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 9, "date": "2019-10-29T17:00:00.000Z", "size": "40FT", "no_count": "sadsasad", "tujuan": "asd", "zona": "ZONA2", "supir": "Supir1", "harga": 750000, "id_zona": 2 }, { "id": 10, "date": "2019-10-29T17:00:00.000Z", "size": "20FT", "no_count": "23RTAWDFRRW", "tujuan": "sdsaassa", "zona": "ZONA1", "supir": "Supir1", "harga": 350000, "id_zona": 1 } ], }

2. Buat Table di file EJS anda seperti berikut

<table class="table" id="rekapan_table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Tanggal</th>
            <th scope="col">Size</th>
            <th scope="col">Zona</th>
            <th scope="col">No Container</th>
            <th scope="col">Tujuan</th>
            <th scope="col">Supir</th>
            <th scope="col">Harga</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

3. Baca API tadi dengan menggunakan apapun, namun pada kasus kali ini saya menggunakan ajax

function GetAPI() {
        const url = "http://localhost:3000/"
        $.ajax({
            url: url,
            method: "GET",
            resultType: "JSON",
            success: function (results) {
                const table = document.getElementById("rekapan_table")
                const result_data = results.data
                for (var i = 0; i < result_data.length; i++) {
                    var data = result_data[i]
                    var row = table.insertRow(i + 1)
                    var no = row.insertCell(0)
                    var tanggal = row.insertCell(1)
                    var size = row.insertCell(2)
                    var zona = row.insertCell(3)
                    var no_count = row.insertCell(4)
                    var tujuan = row.insertCell(5)
                    var supir = row.insertCell(6)
                    var harga = row.insertCell(7)
                    var action = row.insertCell(8)
                    no.innerHTML = i + 1
                    tanggal.innerHTML = convertDate(data.date)
                    size.innerHTML = data.size
                    no_count.innerHTML = data.no_count
                    tujuan.innerHTML = data.tujuan
                    zona.innerHTML = data.zona
                    supir.innerHTML = data.supir
                    harga.innerHTML = convertToRupiah(data.harga)
                    const params_get = `id_get=${data.id}&no_count_get=${data.no_count}&tanggal_get=${data.date}&tujuan_get=${data.tujuan}&supir_get=${data.supir}&zona_get=${data.id_zona}&harga_get=${data.harga}&`
                    action.innerHTML = `<a href='/edit_pengiriman?${params_get}'>Edit</a> 
                    |<a href='#' onclick=deleteConfirm(${data.id})>Delete</a> `
                }
            }
        })
    }

Baca Juga : Cara Membuat Text to Voice di React Native

Penjelasan Fungsi:

1. success: function (results){ } : untuk menyimpan hasil dari API ke dalam parameter results
2. for ( var i = 0 ; i < result_data.length ; i++) { } : untuk mengulang fungsi sesuai panjang result_data
3. var row = table.insertRow( i + 1 ) : untuk membuat baris baru dalam table
4. var no = row.insertCell(0)  : untuk menambah kolom baru dalam row
5. no.innerHTML = i + 1  : untuk memasukan data atau tulisan ke dalam kolom yang telah dipilih

! Perhatian untuk var no kita buat sesuai nama field yang kita butuhkan. Disana saya juga membuat var zona karena saya membutuhkan field zona untuk menampung data zona.

4. Nah setelah selesai coba kalian buka lagi Website kalian dan Tara..., Data dari API kalian akan langsung masuk ke website kalian. Berikut adalah tampilan dari website saya

Data dari API ke Table

Nah berikut adalah bagaimana "Cara Memasukan Data API ke dalam Table di EJS Template", Sekian dari saya dan saya mohon maaf sebesar-besarnya bila ada kata saya yang kurang berkenan.