Loading products data from Firestore to Webpage using javascript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Loading products data from Firestore to Webpage using javascript without wasting too much if your time.

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?

the database:

the result

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>`
We are here to answer your question about Loading products data from Firestore to Webpage using javascript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji