該任務的目標是從下面給出的物件串列中創建一個無序串列的 HTML 串列。
到目前為止我的設定：
const users = [
{ name: "Helene", age: 54, email: "[email protected]", },
{ name: "Janet", age: 24, email: "[email protected]", },
{ name: "Michel", age: 25, email: "[email protected]",}
];
const div = document.querySelector('.app');
let usersName = [];
let usersEmails = [];
let usersAge = [];
for (let i = 0; i < users.length; i ) {
usersEmails.push(users[i].email);
usersName.push(users[i].name);
usersAge.push(users[i].age);;
}
for (let i = 0; i < users.length; i ) {
var ul = document.createElement('ul');
div.appendChild(ul);
for (let i = 0; i < 3; i ) {
var li = document.createElement('li');
li.innerHTML = [usersName[i], usersAge[i], usersEmails[i]];
ul.appendChild(li);
}
}<div class="app"></div>
我遇到的問題是資訊都堆疊在一個“li”元素中，我如何制作它以便每個物件都有自己的“li”？
預期輸出：
<ul>
<li>Helene</li>
<li>54</li>
<li>[email protected]</li>
</ul>
<ul>
<li>Janet</li>
<li>24</li>
<li>[email protected]</li>
</ul>
<ul>
<li>Michel</li>
<li>25</li>
<li>[email protected]</li>
</ul>
將不勝感激的幫助。謝謝
uj5u.com熱心網友回復：
如果目標是創建一個用戶串列，其中每個用戶只出現一次，并且所有專案都出現在同一行中，那么您只需要一個回圈來獲取用戶，并生成li專案。
const users = [{"name":"Helene","age":54,"email":"[email protected]"},{"name":"Janet","age":24,"email":"[email protected]"},{"name":"Michel","age":25,"email":"[email protected]"}];
const ul = document.querySelector('.app');
for (let i = 0; i < users.length; i ) {
const user = users[i]; // user from list by index
const li = document.createElement('li');
li.innerHTML = `${user.name}, ${user.age}, ${user.emails}`; // create the string for the user
ul.appendChild(li);
}<ul class="app"></ul>如果你想創建一個用戶屬性子串列，你需要創建另一個ul內部li使用，迭代物件的屬性for...in，然后創建li為每個屬性項：
const users = [{"name":"Helene","age":54,"email":"[email protected]"},{"name":"Janet","age":24,"email":"[email protected]"},{"name":"Michel","age":25,"email":"[email protected]"}];
const ul = document.querySelector('.app');
for (let i = 0; i < users.length; i ) {
const user = users[i]; // user from list by index
const li = document.createElement('li');
const subUl = document.createElement('ul');
ul.appendChild(li);
li.appendChild(subUl);
for(const key in user) {
const val = user[key];
const subLi = document.createElement('li');
subLi.innerHTML = `${key} - ${val}`;
subUl.appendChild(subLi);
}
}<ul class="app"></ul>uj5u.com熱心網友回復：
如果您的問題是復制用戶串列，并且您只想為所有用戶創建一個串列，您可以像這樣輕松洗掉用戶的第二次迭代：
const users = [{
name: "Helene",
age: 54,
email: "[email protected]",
}, {
name: "Janet",
age: 24,
email: "[email protected]",
}, {
name: "Michel",
age: 25,
email: "[email protected]",
}];
const div = document.querySelector('.app');
let usersName = [];
let usersEmails = [];
let usersAge = [];
for (let i = 0; i < users.length; i ) {
usersEmails.push(users[i].email);
usersName.push(users[i].name);
usersAge.push(users[i].age);;
}
var ul = document.createElement('ul');
div.appendChild(ul);
for (let i = 0; i < users.length; i ) {
var li = document.createElement('li');
li.innerHTML = [usersName[i], usersAge[i], usersEmails[i]];
ul.appendChild(li);
}<div class="app"></div>uj5u.com熱心網友回復：
您需要迭代兩次才能實作目標。首先，您需要使用maporfor關鍵字遍歷陣列，然后當您有一個物件時，您需要使用 遍歷該物件Object.keys。像這樣的東西：
const users = [
{
name: "Helene",
age: 54,
email: "[email protected]",
}, {
name: "Janet",
age: 24,
email: "[email protected]",
}, {
name: "Michel",
age: 25,
email: "[email protected]",
}];
// first, you need to loop through the array to get each user and then iterate over the user itself for its properties
users.map(user=> {
Object.keys(user).map(key => {
console.log(user[key])
// we are printing the 'key' property of the user Object.
})
// the above is the one you want; you can push it to an array and then render it in your HTML file
})uj5u.com熱心網友回復：
你讓事情變得比你需要的要復雜一些。你需要一個div，一個ul。當您遍歷資料時，您可以li在每次迭代時創建一個新資料，然后將用戶資料附加到其文本內容中。然后裝上li了ul，然后，終于，在回圈之后，附加ul到該頁面。
const users=[{name:"Helene",age:54,email:"[email protected]"},{name:"Janet",age:24,email:"[email protected]"},{name:"Michel",age:25,email:"[email protected]"}];
const div = document.querySelector('.app');
const ul = document.createElement('ul');
for (let i = 0; i < users.length; i ) {
const user = users[i];
const li = document.createElement('li');
li.textContent = `${user.name}, ${user.age}, ${user.email}`;
ul.appendChild(li);
}
div.appendChild(ul);<div class="app"></div>附加檔案
- 模板/字串文字
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/377600.html
標籤：javascript html 目的 dom html 列表