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?
