0
171
VisualizaçõesList 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: "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
3 Respostas
Responde à pergunta0
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>0
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>0
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
})