0
172
ViewsLista de objetos a la lista desordenada de HTML
El objetivo de la tarea es crear una lista HTML desordenada a partir de la lista de objetos que se proporciona a continuación.
Mi configuración hasta ahora:
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> 
El problema que tengo es que toda la información está apilada en un elemento 'li', ¿cómo hago para que cada objeto tenga su propio 'li'?
Rendimiento esperado:
<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>Agradecería la ayuda. Gracias
3 answers
Answer question0
Si el objetivo es crear una lista de usuarios, donde cada usuario solo aparece una vez y todos los elementos aparecen en la misma línea, solo necesita un bucle para obtener el usuario y generar el elemento 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> Si desea crear una sublista de propiedades de usuario, deberá crear otra ul dentro de li , iterar las propiedades del objeto usando for...in y luego crear un elemento li para cada propiedad:
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
Si su problema es duplicar la lista de usuarios y desea tener solo una lista para todos los usuarios, puede eliminar fácilmente su segunda iteración en usuarios como este:
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
Necesita iterar dos veces para lograr su objetivo. Primero, debe recorrer la matriz usando el map o for palabras clave, y luego, cuando tenga un objeto, debe iterar sobre el objeto usando Object.keys . Algo como esto:
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 })