Tengo dificultades para obtener toda la variedad de objetos y mostrarlos en listas HTML. ¿Puede alguien ayudarme, por favor? El siguiente es mi código HTML y JavaScript. Mirando hacia adelante a su ayuda.
const allData = [{ date: '2nd', venue: 'venue1', location: 'location1', }, { date: '3rd', venue: 'venue2', location: 'location2', }, { date: '4th', venue: 'venue3', location: 'location3', } ] allData.forEach(data => { [...document.querySelectorAll('.targets')].forEach(list => { list.innerHTML = ` <h5 >DATE</h5> <h4 >${data.date}</h4> <h5 >VENUE</h5> <h4 >${data.venue}</h4> <h5 >LOCATION</h5> <h4 >${data.location}</h4> <Button >BUY TICKETS</Button> `; }) }); <ul> <li class="targets"></li> </ul>Si cambia el orden de ejecución de los bucles for y agrega cada cadena a la anterior, ¡funciona!
const allData = [{ date: '2nd', venue: 'venue1', location: 'location1', }, { date: '3rd', venue: 'venue2', location: 'location2', }, { date: '4th', venue: 'venue3', location: 'location3', }, ]; const list = document.querySelector('.target') let innerHTML = ''; allData.forEach(data => { innerHTML += ` <li> <h5 class = "shows__date">DATE</h5> <h4 class = "shows__calander">${data.date}</h4> <h5 class = "shows__venue-title">VENUE</h5> <h4 class = "shows__venue">${data.venue}</h4> <h5 class = "shows__location-title">LOCATION</h5> <h4 class = "shows__location">${data.location}</h4> <Button Class = "shows__btn">BUY TICKETS</Button> </li> `; }); list.innerHTML = innerHTML; <ul class="target"> </ul>Creo que no necesita hacer un bucle para class='targets' porque solo tiene un li en su código html . Podría ser mejor simplemente obtener el elemento ul y luego hacer un bucle en la variable allData , luego cambiar el HTML innerHTML de ul en cada bucle.
código HTML
<ul></ul>Código JS:
const allData= [ { date: '2nd', venue: 'venue1', location: 'location1', }, { date: '3rd', venue: 'venue2', location: 'location2', }, { date: '4th', venue: 'venue3', location: 'location3', }, ] let ul = document.querySelector('ul') let listContent = '' allData.forEach(data=>{ listContent = listContent + ` <li> <h5 >DATE</h5> <h4 >${data.date}</h4> <h5 >VENUE</h5> <h4 >${data.venue}</h4> <h5 >LOCATION</h5> <h4 >${data.location}</h4> <Button >BUY TICKETS</Button> </li> `; }); ul.innerHTML = listContentEditado en base al comentario de sardina
El OP proporciona una estructura de lista básica mediante el marcado <ul/> / <li/> "desnudo" .
Por lo tanto, solo hay un único elemento <li class="targets"></li> al que se puede acceder con una consulta como '.targets' . Lo que significa que el OP siempre escribe en un mismo elemento que muestra el resultado esperado de una lista que presenta solo un elemento con los últimos datos del elemento de la matriz de datos.
Pero el elemento <li/> se puede usar como modelo para crear otros elementos de elementos de lista a través de<node>.cloneNode , que serán todos <li class="targets"></li> iguales.
Ahora se puede asignar el contenido html relacionado con el elemento de datos correcto a cada clon de elemento de lista recién creado que también se agrega a su elemento de lista principal...
const allData = [{ date: '2nd', venue: 'venue1', location: 'location1', }, { date: '3rd', venue: 'venue2', location: 'location2', }, { date: '4th', venue: 'venue3', location: 'location3', }]; const venueItemBlueprint = document.querySelector('li.targets'); const venueList = venueItemBlueprint && venueItemBlueprint.parentElement; if (venueList) { venueList.innerHTML = ''; allData.forEach(venueData => { const venueItem = venueItemBlueprint.cloneNode(); venueItem.innerHTML = ` <h5>DATE</h5> <h4>${ venueData.date }</h4> <h5>VENUE</h5> <h4>${ venueData.venue }</h4> <h5>LOCATION</h5> <h4>${ venueData.location }</h4> <Button>BUY TICKETS</Button>`; venueList.appendChild(venueItem); }); } <ul> <li class="targets"></li> </ul>