使用 javascript 将产品数据从 Firestore 加载到网页

Question

我对 firestore 还很陌生，为了练习，我正在使用 firestore 作为我的数据库来建立一个在线商店。我正在尝试从 firestore 获取产品，然后在其产品卡上显示每个产品。我使用 Firebase 文档中所述的 forEach() 方法在产品集合中获取所有产品一次，并将结果添加到产品卡中，如下所示：

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>

            
        `
    });
});

问题是，结果显示在线商店中只有一种产品，而我的收藏中有十五种产品。可能是什么问题，因为我认为 forEach() 方法应该遍历集合中的每个产品，并像我上面所做的那样在该过程中创建产品卡。还是应该将每个获取的产品放入一个数组中，然后循环遍历该数组以显示每个产品卡片？

the database:

the result

Answer 1

这是因为每次在 forEach 循环中循环 documentSnapshot 时，都会将 view.innerHTML 设置为与此 documentSnapshot 对应的值。所以你一次又一次地覆盖view的innerHTML属性，最后只显示查询返回的最后一个documentSnapshot对应的数据。

您需要连接所有documentSnapshots 的值，例如使用+=，如下所示：

view.innerHTML += `<div>...</div>`