HTML 无序列表的对象列表

Question

该任务的目标是根据下面给出的对象列表创建一个无序的 HTML 列表。

我目前的设置：

const users = [
  { name: "Helene", age: 54, email: "helene@helene.com", },
  { name: "Janet", age: 24, email: "janet@janet.com", },
  { name: "Michel", age: 25, email: "michel@michel.com",}
];

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>helene@helene.com</li>
  </ul>
  <ul>
    <li>Janet</li>
    <li>24</li>
    <li>janet@janet.com</li>
  </ul>
  <ul>
    <li>Michel</li>
    <li>25</li>
    <li>michel@michel.com</li>
  </ul>

非常感谢您的帮助。谢谢

Answer 1

如果目标是创建一个用户列表，其中每个用户只出现一次，并且所有项目都出现在同一行，则只需一个循环即可获取用户，并生成 li项。

const users = [{"name":"Helene","age":54,"email":"helene@helene.com"},{"name":"Janet","age":24,"email":"janet@janet.com"},{"name":"Michel","age":25,"email":"michel@michel.com"}];

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>

如果要创建用户属性的子列表，您需要在 li 中创建另一个 ul，使用 for...in 迭代对象属性，然后然后为每个属性创建 li 项：

const users = [{"name":"Helene","age":54,"email":"helene@helene.com"},{"name":"Janet","age":24,"email":"janet@janet.com"},{"name":"Michel","age":25,"email":"michel@michel.com"}];

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>

Answer 2

如果您的问题是复制用户列表，而您只想为所有用户创建一个列表，您可以像这样轻松删除对用户的第二次迭代：

const users = [{
  name: "Helene",
  age: 54,
  email: "helene@helene.com",
}, {
  name: "Janet",
  age: 24,
  email: "janet@janet.com",
}, {
  name: "Michel",
  age: 25,
  email: "michel@michel.com",
}];


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>

Answer 3

您需要迭代两次才能实现您的目标。首先，您需要使用 map 或 for 关键字遍历数组，然后当您有一个对象时，您需要使用 Object.keys 遍历该对象。像这样：

const users = [
{
  name: "Helene",
  age: 54,
  email: "helene@helene.com",
}, {
  name: "Janet",
  age: 24,
  email: "janet@janet.com",
}, {
  name: "Michel",
  age: 25,
  email: "michel@michel.com",
}];

// 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
})

Answer 4

你把事情变得更复杂了，你需要这样做。您需要一个 div 和一个 ul。当您遍历数据时，您可以在每次迭代时创建一个新的 li，然后将用户数据附加到其文本内容。然后将 li 附加到 ul，然后，最后，在循环之后，将 ul 附加到页面。

const users=[{name:"Helene",age:54,email:"helene@helene.com"},{name:"Janet",age:24,email:"janet@janet.com"},{name:"Michel",age:25,email:"michel@michel.com"}];

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>

其他文档

Template/string literals

HTML 无序列表的对象列表

List of objects to HTML unordered list

html

javascript

dom

object

html-lists