List of objects to HTML unordered list

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 class="app"></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

Solution

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 class="app"></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 class="app"></ul>