对象列表到 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，然后将用户数据附加到其文本内容中。然后附上liul，最后，在循环之后，附上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