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
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() ^^^^
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;
});