The question is published on by Tutorial Guruji team.
I am fairly new to firestore and for practice I am building an online store using firestore as my database. I am trying to fetch the products from firestore then displaying each product on its product card. I am fetching all the products once in the product collection using the forEach() method as stated in the Firebase documentation and adding the result to the product card as shown below:
var db = firebase.firestore();
var view = document.getElementById("productsRow");
//fetch products from database
db.collection("products").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
var image = doc.data().images[0];
var image2 = doc.data().images[1];
var title = doc.data().title;
var price = doc.data().pricing.toString();
view.innerHTML = `
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="${image}" alt="#">
<img class="hover-img" src="${image2}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
<a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
<a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
</div>
<div class="product-action-2">
<a title="Add to cart" href="#">Add to cart</a>
</div>
</div>
</div>
<div class="product-content">
<h3><a href="product-details.html">${title}</a></h3>
<div class="product-price">
<span>Ksh. ${price}</span>
</div>
</div>
</div>
</div>
`
});
});
the problem is , the result shows only one product on the online store and I have fifteen products in the collection. What could be the issue as I believe the forEach() method should go through each product in the collection and create the product card in the process as I have done above. Or should I put each fetched product into an array then loop across the array to display each product card?
Answer
This is because each time you loop over a documentSnapshot in your forEach loop you set view.innerHTML with the values corresponding to this documentSnapshot. So you overwrite the innerHTML property of view again and again, and at the end you only display the data corresponding to the last documentSnapshot returned by the query.
You need to concatenate the values of all the documentSnapshots, for example by using +=, as shown below:
view.innerHTML += `<div>...</div>`