'Creating Divs Automaticly With forEach - That Contain Data From Firestore

I'm trying to get a list of data from Firestore to automatically create and nest themselves in divs (one for each topic) I feel like Im close but I don't know what I'm doing wrong...

Here is my code

const querySnapshot = await getDocs(collection(db, "vhf", '1', 'week1'));
    querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
    //console.log(doc.id, " => ", doc.data());
    });

    querySnapshot.forEach(function(topics){
        // console.log('Topics From Function: ', topics.data().topic)
        
            let html = ''
            const weekData = topics.data();
            const li = `
            <li>
            <div class="topicRungDiv">${weekData.topic}</div>
            </li>
            `;
        html += li
        });

Could someone please help me get this working? I have patched this together from a tutorial and there are no errors with the code... But I don't understand the function of the let html = '' and the html += li

I also dont understand how to tell the code where to put the new <div> tags as id like them to be put into a specific div container.

Any help, amendments or feedback would be greatly appreciated

javascripthtmlfirebasegoogle-cloud-firestoreforeach


Solution 1:[1]

If anyone reads this question and needs an answer it is in this video:

https://www.youtube.com/watch?v=kIVg_yTiO3Q&list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ&index=9

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wan33

Related Questions