Objek javascript ke daftar html

Question

Dalam tutorial ini, kita akan melihat berbagai cara untuk membuat daftar HTML dari larik JavaScript. Jika kita berbicara tentang daftar HTML sederhana, maka kita membuat secara manual satu per satu semua daftar menggunakan ul (unordered list) dan di dalam tag li (list) itu

Table of Contents Show

Menggunakan untuk Loop
HTML list using JavaScript using for loop
Menggunakan for loop dengan fragmen
HTML list using JavaScript with fragment
Menggunakan Metode forEach()
Bagaimana cara membuat daftar dalam JavaScript untuk HTML?
Bagaimana Anda menampilkan daftar objek dalam HTML?
Bagaimana cara menggunakan objek JavaScript dalam HTML?
Bagaimana cara menampilkan berbagai objek dalam HTML menggunakan JavaScript?

Pertimbangkan sebuah kasus ketika Anda akan memiliki n jumlah item dan Anda harus mencetaknya dalam daftar maka akan menjadi tugas yang sangat sibuk untuk menulis semua item dan mencetak secara manual, bukan?

Mari kita lihat berbagai cara dalam JavaScript untuk membuat daftar HTML

Menggunakan for loop
Menggunakan for loop dengan fragmen
Menggunakan loop forEach()

Menggunakan untuk Loop

Idenya adalah untuk mengulangi semua item yang ada dalam daftar array menggunakan simple for loop yang merupakan metode iterasi default JavaScript vanilla, dan kemudian menambahkan item daftar dengan membuat li (daftar) menggunakan metode createElemnt ke item ul (daftar tidak berurutan)

Contoh


    HTML list using JavaScript using for loop

Menggunakan for loop dengan fragmen

Ini sama dengan cara pertama yang dibahas di atas tetapi bedanya disini, kita akan menggunakan Fragment untuk menyisipkan. Fragmen memiliki kecenderungan untuk membuat ini terpisah berarti tidak menempel ke pohon DOM sehingga tidak menempel ke DOM asli maka browser harus melakukan lebih sedikit pekerjaan. Di metode atas di mana tanpa fragmen browser melakukan banyak pekerjaan di belakang layar yang berdampak pada kinerja sebenarnya apalagi itu tidak benar-benar merender di halaman sebenarnya. Jadi, selalu lebih baik menggunakan fragmen

Untuk menggunakan fragmen, kami akan menambahkan item daftar ke fragmen terlebih dahulu, lalu kami akan menambahkan fragmen ke daftar alih-alih memasukkan langsung ke item daftar tanpa fragmen

Contoh



   HTML list using JavaScript with fragment

_

Menggunakan Metode forEach()

forEach() adalah metode array dalam JavaScript yang memanggil fungsi yang diberikan satu kali untuk setiap elemen item pada dasarnya mengeksekusi fungsi callback kustom untuk setiap item yang ada dalam daftar array dan melakukan pekerjaan yang sama seperti for loop

Dalam artikel ini, kita akan melihat sintaks objek JavaScript yang mendasar, dan meninjau kembali beberapa fitur JavaScript yang telah kita lihat sebelumnya dalam kursus ini, mengulangi fakta bahwa banyak fitur yang telah Anda tangani adalah objek.

Prasyarat. Literasi komputer dasar, pemahaman dasar tentang HTML dan CSS, keakraban dengan dasar-dasar JavaScript (lihat Langkah pertama dan Blok penyusun). Objektif. Untuk memahami dasar-dasar bekerja dengan objek dalam JavaScript. membuat objek, mengakses dan memodifikasi properti objek, dan menggunakan konstruktor

Objek adalah kumpulan data dan/atau fungsionalitas terkait. Ini biasanya terdiri dari beberapa variabel dan fungsi (yang disebut properti dan metode saat berada di dalam objek). Mari kita bekerja melalui sebuah contoh untuk memahami seperti apa bentuknya

Untuk memulainya, buat salinan lokal dari oojs kami. html. Ini berisi sangat sedikit — elemen

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

_2 bagi kita untuk menulis kode sumber kita. Kami akan menggunakan ini sebagai dasar untuk menjelajahi sintaks objek dasar. Saat bekerja dengan contoh ini, Anda harus membuka dan siap mengetikkan beberapa perintah

Seperti banyak hal dalam JavaScript, membuat objek sering kali dimulai dengan mendefinisikan dan menginisialisasi variabel. Coba masukkan baris berikut di bawah kode JavaScript yang sudah ada di file Anda, lalu simpan dan segarkan

const person = {};

Sekarang buka browser Anda, masukkan

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

3 ke dalamnya, dan tekan Enter/Return. Anda harus mendapatkan hasil yang mirip dengan salah satu baris di bawah ini

[object Object]
Object { }
{ }

Selamat, Anda baru saja membuat objek pertama Anda. Pekerjaan selesai. Tapi ini adalah objek kosong, jadi kita tidak bisa berbuat banyak dengannya. Mari perbarui objek JavaScript di file kita agar terlihat seperti ini

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_

Setelah menyimpan dan menyegarkan, coba masukkan beberapa hal berikut ke dalam konsol JavaScript di devtool browser Anda

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

Anda sekarang memiliki beberapa data dan fungsionalitas di dalam objek Anda, dan sekarang dapat mengaksesnya dengan beberapa sintaks sederhana yang bagus

Jadi apa yang terjadi di sini? . g.

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

4 dan

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

5 di atas), dan nilai (e. g.

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

6 dan

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

7). Setiap pasangan nama/nilai harus dipisahkan dengan koma, dan nama serta nilai dalam setiap kasus dipisahkan dengan titik dua. Sintaks selalu mengikuti pola ini

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

Nilai anggota objek bisa berupa apa saja — dalam objek pribadi kita, kita memiliki angka, larik, dan dua fungsi. Dua item pertama adalah item data, dan disebut sebagai properti objek. Dua item terakhir adalah fungsi yang memungkinkan objek melakukan sesuatu dengan data tersebut, dan disebut sebagai metode objek

Ketika anggota objek adalah fungsi, ada sintaks yang lebih sederhana. Alih-alih

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

_8 kita bisa menulis

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

9. Seperti ini

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Mulai sekarang, kita akan menggunakan sintaks yang lebih singkat ini

Objek seperti ini disebut sebagai literal objek — kita benar-benar menulis konten objek saat kita membuatnya. Ini berbeda dengan objek yang dibuat dari kelas, yang akan kita lihat nanti

Sangat umum untuk membuat objek menggunakan literal objek ketika Anda ingin mentransfer serangkaian item data terkait yang terstruktur dengan cara tertentu, misalnya mengirim permintaan ke server untuk dimasukkan ke dalam database. Mengirim satu objek jauh lebih efisien daripada mengirim beberapa item satu per satu, dan lebih mudah untuk dikerjakan daripada array, saat Anda ingin mengidentifikasi item individual berdasarkan nama

Di atas, Anda mengakses properti dan metode objek menggunakan notasi titik. Nama objek (orang) bertindak sebagai namespace — harus dimasukkan terlebih dahulu untuk mengakses apapun di dalam objek. Selanjutnya Anda menulis titik, lalu item yang ingin Anda akses — ini bisa berupa nama properti sederhana, item properti array, atau panggilan ke salah satu metode objek, misalnya

person.age;
person.bio();

Properti objek itu sendiri dapat menjadi objek. Misalnya, coba ubah anggota

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

_4 dari

const person = {
  name: ["Bob", "Smith"],
};

ke

const person = {
  name: {
    first: "Bob",
    last: "Smith",
  },
  // …
};

Untuk mengakses barang-barang ini, Anda hanya perlu mengaitkan langkah ekstra ke ujung dengan titik lain. Coba ini di konsol JS

person.name.first;
person.name.last;

Jika Anda melakukan ini, Anda juga harus melalui kode metode Anda dan mengubah setiap contoh

[object Object]
Object { }
{ }

0

ke

[object Object]
Object { }
{ }

1

Jika tidak, metode Anda tidak akan berfungsi lagi

Notasi braket menyediakan cara alternatif untuk mengakses properti objek. Alih-alih menggunakan seperti ini

[object Object]
Object { }
{ }

2

Anda malah bisa menggunakan tanda kurung

[object Object]
Object { }
{ }

_3

Ini terlihat sangat mirip dengan cara Anda mengakses item dalam array, dan pada dasarnya adalah hal yang sama — alih-alih menggunakan nomor indeks untuk memilih item, Anda menggunakan nama yang terkait dengan nilai setiap anggota. Tidak heran jika objek terkadang disebut array asosiatif — mereka memetakan string ke nilai dengan cara yang sama seperti array memetakan angka ke nilai.

Notasi titik umumnya lebih disukai daripada notasi braket karena lebih ringkas dan lebih mudah dibaca. Namun ada beberapa kasus di mana Anda harus menggunakan tanda kurung. Misalnya, jika nama properti objek disimpan dalam variabel, Anda tidak dapat menggunakan notasi titik untuk mengakses nilainya, tetapi Anda dapat mengakses nilainya menggunakan notasi braket

Dalam contoh di bawah ini, fungsi

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

_1 dapat menggunakan

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

2 untuk mengambil nilai properti yang disebutkan dalam

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

3

[object Object]
Object { }
{ }

_4

Sejauh ini kita hanya melihat pengambilan (atau mendapatkan) anggota objek — Anda juga dapat mengatur (memperbarui) nilai anggota objek dengan mendeklarasikan anggota yang ingin Anda atur (menggunakan notasi titik atau tanda kurung), seperti ini

[object Object]
Object { }
{ }

5

Coba masukkan baris di atas, lalu minta anggota lagi untuk melihat bagaimana mereka berubah, seperti itu

[object Object]
Object { }
{ }

_6

Menetapkan anggota tidak hanya berhenti memperbarui nilai properti dan metode yang ada; . Coba ini di konsol JS

[object Object]
Object { }
{ }

_7

Anda sekarang dapat menguji anggota baru Anda

[object Object]
Object { }
{ }

_8

Salah satu aspek berguna dari notasi braket adalah dapat digunakan untuk mengatur tidak hanya nilai anggota secara dinamis, tetapi juga nama anggota. Misalkan kita ingin pengguna dapat menyimpan jenis nilai khusus di data orang mereka, dengan mengetikkan nama dan nilai anggota ke dalam dua input teks. Kita bisa mendapatkan nilai-nilai seperti ini

[object Object]
Object { }
{ }

_9

Kami kemudian dapat menambahkan nama dan nilai anggota baru ini ke objek

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

3 seperti ini

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_0

Untuk mengujinya, coba tambahkan baris berikut ke dalam kode Anda, tepat di bawah kurung kurawal penutup objek

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

3

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_1

Sekarang coba simpan dan segarkan, dan masukkan yang berikut ke dalam input teks Anda

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_2

Menambahkan properti ke objek menggunakan metode di atas tidak dimungkinkan dengan notasi titik, yang hanya dapat menerima nama anggota literal, bukan nilai variabel yang menunjuk ke nama

Anda mungkin telah memperhatikan sesuatu yang sedikit aneh dalam metode kami. Lihat yang ini misalnya

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_3

Anda mungkin bertanya-tanya apa itu "ini". Kata kunci

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

_6 mengacu pada objek saat ini kode sedang ditulis di dalamnya — jadi dalam hal ini

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

6 setara dengan

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

3. Jadi mengapa tidak menulis

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

_3 saja?

Nah, ketika Anda hanya perlu membuat satu objek literal, itu tidak begitu berguna. Tetapi jika Anda membuat lebih dari satu,

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

6 memungkinkan Anda menggunakan definisi metode yang sama untuk setiap objek yang Anda buat

Mari kita ilustrasikan apa yang kita maksud dengan sepasang objek orang yang disederhanakan

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_4

Dalam hal ini,

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_1 menampilkan "Hai. Saya Chris. ";

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_2 di sisi lain menampilkan "Hai. Saya Deepti. ", meskipun kode metodenya sama persis di setiap kasus. Ini tidak terlalu berguna saat Anda menulis literal objek dengan tangan, tetapi akan sangat penting saat kita mulai menggunakan konstruktor untuk membuat lebih dari satu objek dari satu definisi objek, dan itulah subjek dari bagian selanjutnya

Menggunakan literal objek tidak apa-apa jika Anda hanya perlu membuat satu objek, tetapi jika Anda harus membuat lebih dari satu objek, seperti di bagian sebelumnya, mereka sangat tidak memadai. Kita harus menulis kode yang sama untuk setiap objek yang kita buat, dan jika kita ingin mengubah beberapa properti objek - seperti menambahkan properti

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

3 - maka kita harus ingat untuk memperbarui setiap objek

Kami ingin cara untuk mendefinisikan "bentuk" objek — kumpulan metode dan properti yang dapat dimilikinya — dan kemudian membuat objek sebanyak yang kita suka, hanya memperbarui nilai untuk properti yang berbeda

Versi pertama ini hanyalah sebuah fungsi

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_5

Fungsi ini membuat dan mengembalikan objek baru setiap kali kita memanggilnya. Objek akan memiliki dua anggota

properti

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

_4

metode

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

5

Perhatikan bahwa

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_6 mengambil parameter

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

4 untuk menetapkan nilai properti

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

4, tetapi nilai dari metode

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

5 akan sama untuk semua objek yang dibuat menggunakan fungsi ini. Ini adalah pola yang sangat umum untuk membuat objek

Sekarang kita dapat membuat objek sebanyak yang kita suka, menggunakan kembali definisinya

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_6

Ini berfungsi dengan baik tetapi agak bertele-tele. kita harus membuat objek kosong, menginisialisasi, dan mengembalikannya. Cara yang lebih baik adalah dengan menggunakan konstruktor. Konstruktor hanyalah sebuah fungsi yang dipanggil menggunakan kata kunci

person.age;
person.bio();

0. Saat Anda memanggil konstruktor, itu akan

membuat objek baru

ikat

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

_6 ke objek baru, sehingga Anda dapat merujuk ke

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

6 dalam kode konstruktor Anda

jalankan kode di konstruktor
mengembalikan objek baru

Konstruktor, dengan konvensi, dimulai dengan huruf kapital dan diberi nama untuk jenis objek yang mereka buat. Jadi kita bisa menulis ulang contoh kita seperti ini

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_7

Untuk memanggil

person.age;
person.bio();

3 sebagai konstruktor, kami menggunakan

person.age;
person.bio();

0

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_8

Saat Anda mempelajari contoh-contoh ini, Anda mungkin berpikir bahwa notasi titik yang Anda gunakan sangat familier. Itu karena Anda telah menggunakannya sepanjang kursus. Setiap kali kami mengerjakan contoh yang menggunakan API browser bawaan atau objek JavaScript, kami telah menggunakan objek, karena fitur tersebut dibuat menggunakan jenis struktur objek yang persis sama dengan yang telah kami lihat di sini

Jadi ketika Anda menggunakan metode string seperti

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

_9

Anda menggunakan metode yang tersedia pada objek

person.age;
person.bio();

5. Setiap kali Anda membuat string dalam kode Anda, string tersebut secara otomatis dibuat sebagai instance dari

person.age;
person.bio();

5, dan karenanya memiliki beberapa metode dan properti umum yang tersedia di dalamnya

Saat Anda mengakses model objek dokumen menggunakan baris seperti ini

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

0

Anda menggunakan metode yang tersedia pada objek

person.age;
person.bio();

7. Untuk setiap halaman web yang dimuat, instance

person.age;
person.bio();

7 dibuat, disebut

person.age;
person.bio();

9, yang mewakili seluruh struktur halaman, konten, dan fitur lain seperti URL-nya. Sekali lagi, ini berarti bahwa ia memiliki beberapa metode dan properti umum yang tersedia di dalamnya

Hal yang sama berlaku untuk hampir semua objek atau API bawaan lainnya yang telah Anda gunakan —

const person = {
  name: ["Bob", "Smith"],
};

0,

const person = {
  name: ["Bob", "Smith"],
};

1, dan seterusnya

Perhatikan bahwa objek dan API bawaan tidak selalu membuat instance objek secara otomatis. Sebagai contoh, Notifications API — yang memungkinkan browser modern mengaktifkan notifikasi sistem — mengharuskan Anda membuat instance objek baru menggunakan konstruktor untuk setiap notifikasi yang ingin Anda aktifkan. Coba masukkan berikut ini ke konsol JavaScript Anda

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

1

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . Dasar-dasar objek

Selamat, Anda telah mencapai akhir dari artikel objek JS pertama kami — Anda sekarang seharusnya memiliki ide bagus tentang cara bekerja dengan objek dalam JavaScript — termasuk membuat objek sederhana Anda sendiri. Anda juga harus menghargai bahwa objek sangat berguna sebagai struktur untuk menyimpan data dan fungsionalitas terkait — jika Anda mencoba melacak semua properti dan metode di objek

person.name;
person.name[0];
person.age;
person.bio();
person.introduceSelf();

3 kami sebagai variabel dan fungsi terpisah, itu akan menjadi tidak efisien dan membuat frustrasi, dan kami' . Objek memungkinkan kita menyimpan informasi dengan aman di dalam paket mereka sendiri, jauh dari bahaya

Pada artikel selanjutnya kita akan melihat prototipe, yang merupakan cara mendasar JavaScript memungkinkan sebuah objek mewarisi properti dari objek lain

Bagaimana cara membuat daftar dalam JavaScript untuk HTML?

biarkan daftar = dokumen. getElementById( "myList" ); Langkah 3. Sekarang ulangi semua item array menggunakan JavaScript forEach dan pada setiap iterasi, buat elemen li dan beri nilai innerText sama dengan item saat ini, dan tambahkan li di daftar.

Bagaimana Anda menampilkan daftar objek dalam HTML?

Daftar HTML yang tidak diurutkan. Daftar yang tidak diurutkan dimulai dengan tag . Setiap item daftar dimulai dengan tag

Bagaimana cara menggunakan objek JavaScript dalam HTML?

Membuat Objek JavaScript .

Buat objek tunggal, menggunakan literal objek

Buat satu objek, dengan kata kunci baru

Tentukan konstruktor objek, lalu buat objek dari tipe yang dibangun

Buat objek menggunakan Object. membuat()

Bagaimana cara menampilkan berbagai objek dalam HTML menggunakan JavaScript?

Untuk menampilkan larik objek dengan benar, kita perlu memformat larik sebagai string JSON . JSON. stringify() memformat array dan memberikan cetakan yang benar. Kita dapat menggunakan tag

kode javascript