undefined inside javascript loop-CodePudding

I want to output a list of all my products that I have in firebase database,for that I go through this loop:

db.collection("products").get().then((querySnapshot) => {

    querySnapshot.forEach((doc) => {
   var wrapper = document.getElementById("wrapper");
   var myHTML = '<h6 id="name">'   doc.name  ' </h6>';

    wrapper.innerHTML = myHTML

        console.log(doc.id, " => ", doc.data());
    });
});

However in my html is prints undefined. Can someone point out the problem and how can I solve it? P.S I am new in web

CodePudding user response：

The name property exists in the DocumentData and not in the DocumentSnapshot itself. Try this:

// no data in original code
// var myHTML = '<h6 id="name">'   doc.name  ' </h6>';


var myHTML = '<h6 id="name">'   doc.data().name  ' </h6>';
// add data()                       ^^^^

CodePudding user response：

Try This,

db.collection("products").get().then((querySnapshot) => {
    
    let customHtml = ``;
    querySnapshot.forEach((doc) => {
        customHtml  = '<h6 id="name">'   doc.name  ' </h6>';
    });
    document.getElementById("wrapper").innerHTML = customHtml;
});