Halo selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Menampilkan Data Dari Array Object Javascript pembahasan tentang javascript kali ini saya akan menampilkan data dari kumpulan data array object dimana di dalamnya terdapat banyak sekali data dan kemudian kita akan menampilkan dan looping dengan fungsi foreach(){}. Untuk contoh data nya saya memiliki data tentang nama – nama movie dan tahun release kemudian saya akan tampilkan pada tag li dan menambahkan class bootstrap 4. Baik langsung saja teman – teman siapkan data array object nya, atau bisa lihat gambar di bawah ini dan buat file dengan nama index.html
Teman – teman boleh ketik sesuai data pada gambar di atas ini atau mungkin bisa membuat data yang teman – teman inginkan, lanjut pada artikel Cara Menampilkan Data Dari Array Object Javascript ini siapkan tag ul dan berikan id. Karena di dalam tag ul kita akan create element li dan kemudian menambahkan class bootstrap nya, saya membuat tag ul nya dan berikan id dan class bootstrap 4 nya
<ul id="list" class="list-group"></ul>
Kemudian kita akan melooping dengan fungsi foreach sekaligus membuat tag li di dalamnya, pertama panggil nama variabel nya dalam data di atas saya memberikan nama movies
movies.forEach(function(ambilData, data){
})
Kemudian di dalam function kita berikan parameter nya untuk mengambil data pada array object nya, selanjutnya kita buat tag li dan tambahkan class bootstrap dengan fungsi create element javascript dan classname
var li = document.createElement('li');
li.className = "list-group-item";
Dan kita tampilkan dengan innerHTML pada id list yang suah saya buat pada tag ul sebelumnya
li.innerHTML = ambilData.title + " <span class='badge badge-primary'>"+ambilData.releaseDate+"</span>";
document.getElementById("list").appendChild(li);
Jika sudah save dan jalankan pada browsernya, teman – teman bisa lihat hasilnya seperti gambar di bawah ini
Data berhasil di looping dengan fungsi foreach, dan jika kita inspect element tag li juga berhasil di buat di dalam tag ul
Itulah cara menampilkan data dari array object dengan javascript, sekian pada artikel kali ini tentang Cara Menampilkan Data Dari Array Object Javascript dan kita akan lanjut pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.