Selamat datang di tutorial tentang cara membuat daftar HTML dari array atau objek Javascript. Perlu menampilkan array data dengan baik?
Untuk membuat daftar HTML dari array di Javascript
- Buat daftar HTML var ol = document.createElement("ol");
- Ulangi array dan tambahkan item daftar for (let i of ARRAY) { let li = document.createElement("li"); li.innerHTML = i; ol.appendChild(li); }
- Tambahkan daftar ke tempat yang Anda inginkan document.getElementById("TARGET").appendChild(ol);
Itu mencakup dasar-dasarnya, baca terus untuk contoh lainnya
ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk
TLDR – SLIDE CEPAT
Unduh & Catatan
UNDUH & CATATAN
Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan
CATATAN CEPAT
Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman
DOWNLOAD KODE CONTOH
Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri
ARRAY / OBJEK UNTUK DAFTAR
Baiklah, sekarang mari kita masuk ke contoh pembuatan daftar HTML dari array atau objek
1) BUAT dan TAMBAHKAN ELEMEN HTML
1-buat-elemen. html
<!-- (A) DIV CONTAINER --> <div id="demoA"></div> <!-- (B) JAVASCRIPT --> <script> // (B1) DUMMY ARRAY var arr = ["Apple", "Banana", "Cherry"]; // (B2) CREATE LIST var list = document.createElement("ol"); for (let i of arr) { let item = document.createElement("li"); item.innerHTML = i; list.appendChild(item); } // (B3) APPEND LIST TO CONTAINER document.getElementById("demoA").appendChild(list); </script>Ini adalah “versi lengkap” dari cuplikan di pendahuluan – Seharusnya cukup mudah dan cukup jelas
- Buat daftar
- Ulangi dan tambahkan daftar item
- Kemudian lampirkan seluruh daftar ke mana pun Anda inginkan
2) STRING HTML MANUAL
2-buat-html. html
<!-- (A) DIV CONTAINER --> <div id="demoB"></div> <!-- (B) JAVASCRIPT --> <script> // (B1) DUMMY ARRAY var arr = ["Apple", "Banana", "Cherry"]; // (B2) CREATE LIST var list = "<ol>"; for (let i of arr) { list += `<li>${i}</li>`; } list += "</ol>"; // (B3) APPEND LIST TO CONTAINER document.getElementById("demoB").innerHTML = list; </script>_Jika “cara berorientasi objek” di atas untuk membuat elemen HTML tidak cocok untuk Anda, inilah alternatifnya – Kami membuat string daftar HTML secara manual, lalu melampirkannya ke wadah
3) OBJEK BERSARANG
3-objek. php
<!-- (A) DIV CONTAINER --> <div id="demoC"></div> <!-- (B) JAVASCRIPT --> <script> // (B1) DUMMY OBJECT var obj = { "Fruits" : ["Apple", "Banana", "Cherry"], "Vegetables" : ["Celery", "Cabbage", "Carrot"] }; // (B2) CREATE LIST var list = document.createElement("ul"); for (let i in obj) { // (B2-1) SUB-LIST HEADING let item = document.createElement("li"); let subitem = document.createElement("strong"); subitem.innerHTML = i; list.appendChild(item); item.appendChild(subitem); // (B2-2) SUB-LIST ITEMS let sublist = document.createElement("ul"); item.appendChild(sublist); for (let j of obj[i]) { subitem = document.createElement("li"); subitem.innerHTML = j; sublist.appendChild(subitem); } } // (B3) APPEND LIST TO CONTAINER document.getElementById("demoC").appendChild(list); </script>Terakhir, bagaimana kita menangani objek bersarang?
BIT & LINK EKSTRA
Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda
LINK dan REFERENSI
- Cara Membuat dan Menata Daftar HTML – Code Boxx
- Daftar Horisontal Responsif Dalam HTML CSS – Code Boxx
- Daftar Sortir – Kotak Kodex
LEMBAR CHEAT INFOGRAFIS
Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode