Cara Menampilkan Data Dari Array Object Javascript

Halo selamat datang kembali di blog tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan tips dan trik seputar dunia blog. Di kesempatan kali ini saya akan memberikan tips mengenai Cara Menampilkan Data Dari Array Object Javascript pembahasan mengenai 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 guna foreach(){}. Bagi contoh data nya saya mempunyai data mengenai nama – nama movie dan tahun release kemudian saya akan tampilkan di tag li dan menambahkan class bootstrap 4. Bagus seketika saja teman – teman siapkan data array object nya, atau dapat lihat gambar di bawah ini dan bikin file dengan nama index.html

Teman – teman boleh ketik sesuai data di gambar di atas ini atau mungkin dapat membangun data yang teman – teman inginkan, lanjut di artikel Cara Menampilkan Data Dari Array Object Javascript ini siapkan tag ul dan berikan id. Karena di pada tag ul kita akan create element li dan kemudian menambahkan class bootstrap nya, saya membangun tag ul nya dan berikan id dan class bootstrap 4 nya

<ul id=list class=list-group></ul>

Kemudian kita akan melooping dengan guna foreach sekaligus membangun tag li di dalamnya, pertama-tama panggil nama variabel nya pada data di atas saya memberikan nama movies

movies.forEach(function(ambilData, data){
 
})

Kemudian  di pada function kita berikan parameter nya bagi mengambil data di array object nya, berikutnya kita bikin tag li dan tambahkan class bootstrap dengan guna create element javascript dan classname

var li = document.createElement('li');
li.className = list-group-item;

Dan kita tampilkan dengan innerHTML di id list yang suah saya bikin di tag ul sebelumnya

li.innerHTML = ambilData.title +   <span class='badge badge-primary'>+ambilData.releaseDate+</span>;
document.getElementById(list).appendChild(li);

Apabila telah save dan jalankan di browsernya, teman – teman dapat lihat hasilnya seperti gambar di bawah ini

Data berhasil di looping dengan guna foreach, dan seandainya kita inspect element tag li pun berhasil di bikin di pada tag ul

Demikianlah cara menampilkan data dari array object dengan javascript, demikian di artikel kali ini mengenai Cara Menampilkan Data Dari Array Object Javascript dan kita akan lanjut di artikel yang akan datang. Terimakasih dan hingga jumpa, semoga bermanfaat.

Sumber https://kursuswebsite.org