The goal of the task is to create an unordered HTML list from list of objects given below.

My setup so far:

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 ></div>

The problem I have is that the information is all stacked in one 'li' element, how do I make it so that each object will have it's own 'li'?

Expected output:

  <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>

Would appreciate the help. Thanks

CodePudding user response：

If the goal is to create a list of users, where each user only appear once, and all items appear in the same line, you only need a single loop to get the user, and generate the li item.

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 ></ul>

If you want to create a sub-list of user properties, you'll need to create another ul inside the li, iterate the object properties using for...in, and then create li item for each property:

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 ></ul>

CodePudding user response：

If your problem is duplicating the list of user and you want to have just one list for all users you can easily remove your second iteration on users like this:

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 ></div>

CodePudding user response：

You need to iterate twice for achieving your goal. First, you need to loop through the array using map or for keywords, and then when you have an object, you need to iterate over the object using Object.keys. Something like this:

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

CodePudding user response：

You've made things a little more complicated that you need to. You need one div, and one ul. When you loop over the data you can create a new li with each iteration and then attach the user data to its text content. Then attach the li the ul, and then, finally, after the loop, attach the ul to the page.

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 ></div>

Additional documentation

• Template/string literals