List of objects to HTML unordered list

Question

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

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

Would appreciate the help. Thanks

Answer 1

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

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

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

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

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

Additional documentation

• Template/string literals