Estoy obteniendo un grupo de documentos en un forEach de Firestore, sé que estoy obteniendo todo esto porque puedo ver documentos y campos en la consola.
Pero cuando agrego la identificación al campo obtenido, solo muestra un documento. (deberían ser 5 mosaicos e imágenes pero solo puedo ver uno)
Al leer, sé que solo necesito de alguna manera duplicar el código HTML en función de los documentos obtenidos en la colección, pero tengo dificultades para hacerlo.
código JavaScript
const i = query(collection(db, "teams")); const unsubscribe = onSnapshot(i, (querySnapshot) => { querySnapshot.forEach((doc) => { const docData = doc.data(); document.getElementById("ageGroup").innerText = docData.ageGroup, document.getElementById("teamImage").src = docData.teamImage, console.log("Current data: ", docData); }); });código HTML
<section class="teams"> <article> <h1 class="team-names" id="ageGroup"></h1> <div class="team-line"></div> <img class="team-image" id="teamImage"> </article> </section>A menos que sepa cuántos elementos habrá en el resultado de antemano, cree dinámicamente nuevos elementos dentro del ciclo y luego inserte los datos de la base de datos en el HTML.
No use identificaciones: solo deben usarse para elementos absolutamente únicos, no para elementos repetidos.
Para un <article> para cada artículo, donde el padre de todos los artículos es .teams , haga lo siguiente:
const teams = document.querySelector('.teams'); querySnapshot.forEach((doc) => { const docData = doc.data(); const article = teams.appendChild(document.createElement('article')); article.innerHTML = ` <h1 class="team-names"></h1> <div class="team-line"></div> <img class="team-image"> `; article.children[0].textContent = docData.ageGroup; article.children[2].src = docData.teamImage; });