Loading products data from Firestore to Webpage using javascript

by

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

39 thoughts on “Loading products data from Firestore to Webpage using javascript”

  18. 156999 642103Its genuinely a cool and helpful piece of information. Im glad which you simply shared this valuable data with us. Please stay us informed like this. Thank you for sharing. 823256

    Reply

  31. Howdy very cool website!! Guy .. Beautiful ..
    Superb .. I’ll bookmark your website and take the feeds also?
    I am glad to seek out so many helpful info right here within the publish, we’d like develop extra
    strategies on this regard, thanks for sharing. . . . . .

    Reply

  32. I have been surfing online more than 2 hours today, yet
    I never found any interesting article like yours. It’s pretty worth enough for me.
    Personally, if all site owners and bloggers made good content as you did, the
    web will be much more useful than ever before.

    Reply

  33. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like
    this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your
    new updates.

    Reply

  34. Hi, I do believe this is an excellent web site. I stumbledupon it 😉 I’m going
    to return yet again since I book-marked it. Money and freedom is
    the best way to change, may you be rich and continue to help others.

    Reply

Leave a Comment