La página de la base de datos en el bucle genera elementos: Plato №1, Plato №2, Plato №1, Plato №3, Plato №3
Cómo mostrar su cantidad total: Plato №1 - 2 artículos, Plato №2 - 1 artículo, Plato №3 - 2 artículos
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>Hasta ahora solo he podido mostrar todos los elementos en la consola, pero no puedo obtener la cantidad de cada elemento.
Hay un par de maneras de llegar al resultado que desea, esta es una de ellas:
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) Entonces, sus entradas estarán en map.keys() y la cantidad en map.values()
Puedes hacer algo como esto:
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>