I successfully counted every repeated element in my array, now I just need to display only one of each product along with its quantity.
Here is the current progress:
https://i.sstatic.net/SBm64.png
I have a function that I'm exporting from a file named Helpers.js and then using it in my Vue component.
Helpers.js:
export const groupBy = (arr, criteria) => {
return arr.reduce((obj, item, index) => {
const key = typeof criteria === 'function' ? criteria(item, index) : item[criteria];
if (!obj.hasOwnProperty(key)) {
obj[key] = [];
}
obj[key].push(item);
return obj;
}, {});
}
Orders Component:
import { groupBy } from "@/Utils/Helpers";
... rest of the component...
const groupedOrders = computed(() => groupBy(props.order.products, (product) => product.id));
This is what's in my template:
<div class="mt-5 mx-8" v-for="products in groupedOrders">
{{ products.length }}
<OrderItem
v-for="(product, index) in products"
:product="product"
:key="index"
/>
</div>
This is the data I am seeing in the console:
https://i.sstatic.net/AEZeX.png
Any idea on how to display only one "Modi" and show the quantity like Modi (Qtty. 4)?