I am currently working on building a KDS which will display orders using javascript & firestore. The orders are being displayed with cards. However when i try to display the order items for each order in their respective card, all of the items are being placed in the first order card as you can see in the image attached.
Each order is a document in Firestore and in turn each order has a subcollection called ‘Order Items’ where the order items are stored as seen here.
I’m honestly lost as to what i am doing wrong. Can someone point me in the right direction? Thank you. Screenshot
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);
});
}
});
