Skip to content
Bagas' Hideout

Membuat Data-Based List

Teknis1 min read

Beberapa hari ini saya kepikiran untuk membuat tulisan singkat yang membahas tentang teknis, entah itu tentang tips dan trik, catatan belajar, opini pribadi tentang sebuah bahasa atau framework, atau pengalaman yang didapat saat bekerja yang dipublikasikan minimal satu tulisan setiap minggu. Yups seperti biasa, terus memikirkan tanpa pernah sekalipun coba dieksekusi.

Akhirnya saya coba untuk mulai membuat dn Ini adalah tulisan singkat pertama yang akan saya.

So, here we go!

Kali ini saya akan coba menjelaskan tentang sebuah tips sederhana yang baru saya temukan semalam sebelum tulisan ini dipublish. Yaitu tentang cara membuat sebuah list sederhana yang otomatis akan mengikuti jumlah data yang ada atau akan ditampilkan.

Cara ini murni hanya menggunakan JavaScript saja tanpa bantuan library atau framework apapun (Vanilla JavaScript). Kita hanya akan menggunakan bantuan DOM atau Document Object Model saja.

Pertama, kita akan buat file HTML dan list element-nya terlebih dahulu.

1<html>
2 <head>
3 <title>Simple Data-based Lists</title>
4 </head>
5 <body>
6 <h2>My favorite songs</h2>
7 <ul id="favorite-songs"></ul>
8 </body>
9</html>

Disini saya menambahkan id pada elemen ul nya agar dapat diakses dengan bantuan DOM menggunakan document.getElementById().

Lalu langkah selanjutnya kita akan membuat sebuah file js yang berisi data lagu-lagu favorit yang akan dimasukkan ke dalam sebuah array.

1let favoriteSongs = [
2 "Cry Baby - Official HIGE DANdism",
3 "Pretender - Official HIGE DANdism",
4 "No. 1 - DISH//",
5 "Renegades - One OK Rock",
6];

Selanjutnya kita akan memasukkan baris kode dibawah ini setelah array favoriteSongs yang sudah dibuat sebelumnya.

1window.onload = function() {
2 let favoriteSongsList = document.getElementById("favorite-songs");
3
4 for(let i = 0; i < favoriteSongs.length; i++) {
5 let newFavoriteSong = document.createElement("li");
6
7 newFavoriteSong.innerText = favoriteSongs[i];
8 favoriteSongsList.appendChild(newFavoriteSong);
9 }
10}

Jadi gini, pertama saya membuat sebuah load event listener. Ketika halamannya di load pada browser, maka baris kode yang ada didalam fungsi diatas akan dieksekusi. Lalu saya ambil elemen ul yang tadi di buat pada berkas HTML menggunakan DOM dengan berdasarkan id nya.

Setelah itu, saya membuat sebuah for statement untuk meng-iterasi proses pembuatan list baru berdasarkan jumlah data favorite songs. For statement itu berisi beberapa baris kode, pertama saya membuat sebuah elemen li baru. Lalu saya masukkan favorite song ke dalam elemen li tersebut, yang kemudian akan append atau dimasukkan sebagai child element ke dalam elemen ul yang kita ambil pada langkah-langkah awal.

Terakhir, jangan lupa kita sambungkan file js kita ke file HTML dengan menggunakan tag script yang dibuat di atas tag penutup body.

1<script src="script.js"></script>

Hasilnya akan menjadi seperti ini. Data-based List

List ini akan bertambah secara otomatis ketika kita menambahkan data lagu baru ke dalam array favoriteSongs, nggak percaya? monggo coba sendiri.