The page from the database in the loop outputs elements: Dish №1, Dish №2, Dish №1, Dish №3, Dish №3
How to display their total quantity: Dish №1 - 2 items, Dish №2 - 1 items, Dish №3 - 2 items
let order = document.querySelectorAll('.order');
order.forEach(element => {
arr = element.textContent
console.log(arr)
});<span class="order">Dish №1</span>
<span class="order">Dish №2</span>
<span class="order">Dish №1</span>
<span class="order">Dish №3</span>
<span class="order">Dish №3</span>So far I have only been able to display all the items in the console, but I can't get the quantity of each item
There's couple of ways to get to the result you want, this is one of them:
let order = ['1','1','2','3','3'];
let map = new Map();
for(let i = 0; i < order.length; i++) {
if (map.get(order[i]) === 1) {
map.set(order[i], map.get(order[i]) + 1)
} else {
map.set(order[i], 1)
}
}
console.log(map)So, your entries will be on map.keys() and the quantity on map.values()
You can do something like this :
let order = document.querySelectorAll(".order");
let orderObj = {};
order.forEach((element) => {
if (orderObj[element.textContent] === undefined) {
orderObj[element.textContent] = 0;
orderObj[element.textContent]++;
} else {
orderObj[element.textContent]++;
}
});
Object.keys(orderObj).map((e) => {
console.log(e + " - " + orderObj[e] + " items");
});<span class="order">Dish №1</span>
<span class="order">Dish №2</span>
<span class="order">Dish №1</span>
<span class="order">Dish №3</span>
<span class="order">Dish №3</span>