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