How do you render an empty cart in a food ordering app?
Check if Object.keys(cart).length === 0. If so, show a message like 'Your cart is empty' instead of the cart items and total. This shows attention to UX.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Food Ordering App: Cart Implementation in JavaScript
Use an object mapping item ID to quantity: cart = { 1: 2, 3: 1 }. addToCart increments, removeFromCart deletes, changeQuantity adjusts and removes at 0. Calculate total by summing price * qty for each item.
An object with item ID as key and quantity as value: { itemId: quantity }. This gives O(1) lookup, add, and remove. Alternatively, an array of { id, quantity } objects, but the object is simpler for this use case.
When decrementing, check if the quantity drops to 0 or below. If so, delete the item from the cart: if (cart[id] <= 0) delete cart[id]. This keeps the cart clean and the total accurate.
Still have questions?
Browse all our FAQs or reach out to our support team