用数据填充卡（Javascript 和 Firestore）

Question

我目前正在构建一个 KDS，它将使用 javascript 和 firestore 显示订单。订单用卡片展示。但是，当我尝试在各自的卡片中显示每个订单的订单商品时，所有商品都被放置在第一个订单卡中，如所附图片所示。

每个订单都是 Firestore 中的一个文档，而每个订单都有一个名为“订单商品”的子集合，其中订单商品的存储方式如此处所示。

老实说，我对自己做错了什么感到迷茫。有人能指出我正确的方向吗？谢谢。 截图

const openOrdersQuery = query
                                (
                                    collection(db, "Orders"),
                                    where("orderStatus", "==", "New"),
                                    orderBy("timeStamp")
                                );
                        
        const querySnapshot = onSnapshot(openOrdersQuery, (querySnapshot) => 
        {
            container.innerHTML = "";
            ordersArray = [];
            querySnapshot.forEach((doc) => 
            {
                const orderObject = doc.data();
                ordersArray.push
                (
                    [
                        orderObject.orderNumber, 
                        orderObject.guestRmNum, 
                        orderObject.server, 
                        orderObject.orderStatus, 
                        orderObject.server, 
                        orderObject.table, 
                        orderObject.timeStamp,
                        orderObject.dateCreated.toDate().toLocaleTimeString()
                    ]
                );

                createOrderCard(orderObject);
            });

            async function createOrderCard(order) 
            {
                const card = document.createElement('div');
                card.classList = 'card-body';
                
                const orderContent = `
                                    <div class="card">
                                        <h1 id="orderNumberH1">Order: ${order.orderNumber}</h1>
                                        <h2 id="orderInfoH2">Room: ${order.guestRmNum}</h1>
                                        <h2 id="orderInfoH2">Table: ${order.table}</h2>
                                        <h2 id="orderInfoH2">Server: ${order.server}</h2>
                                        <h2 id="orderInfoH2">Time: ${order.dateCreated.toDate().toLocaleTimeString()}</h2>
                                        <hr></hr>
                                        <ul id="orderItemsList"></ul>
                                        <hr></hr>
                                        <button id="completeBtn" onclick="markCompleted('${order.orderNumber}')">Mark As Completed</button>
                                    </div>
                                `
                ;
                container.innerHTML += orderContent;
                
                var orderItemsArray = new Array();
                const orderItemsDocSnap = await getDocs(collection(db, "Orders/" + order.orderNumber + "/Order Items"));
                orderItemsDocSnap.forEach((doc) => 
                {
                    const orderItemsObject = doc.data();
                    orderItemsArray.push
                    (
                        [
                            orderItemsObject.item, 
                            orderItemsObject.quantity, 
                            orderItemsObject.modifiers, 
                            orderItemsObject.guestRequests
                        ]
                    );

                    let orderItemsList = document.getElementById("orderItemsList");
                        
                    let li = document.createElement('li');
                    li.innerText = orderItemsObject.quantity + "x " + orderItemsObject.item;
                    orderItemsList.appendChild(li);
                });
            }
        });

Answer 1

问题是您创建了多个具有相同 id

orderItemsList

的卡片，然后通过

getElementById

搜索它。由于 id 应该是唯一的，因此

getElementById

将找到第一个匹配项（在第一张卡片内）并停止搜索。相反，您可以确保所有 id 都是唯一的，在

getElementById

处调整 id 名称，然后它应该可以工作。