vue.js - how to create a nested arrays - html

Question

i want to calculate the total costs of products selected by a user under each company.There is my code.
let companiesProductPrices = [];
let prices = [];
this.selectedCompaniesDetails.forEach(company => {
this.chosenItems.forEach(item=> {
item.product_attributes.forEach(product => {
if(company.id == product.company_id)
{
prices.push(product.price);
companiesProductPrices[company.id] = prices;
}
})
});
})
Background information. I have to objects. The products object and the companies object.
Products object referred to as this.chosenItems in my code and is like this;
[
{
"id": 1,
"name": "Zimgold",
"slug": null,
"product_category_id": 1,
"industry_id": 1,
"category": {
"id": 1,
"name": "Cooking Oil",
"slug": null,
"industry_id": 1
},
"product_attributes": [
{
"id": 1,
"description": "2 litres",
"discount": null,
"price": "120",
"tax": null,
"company_id": 1,
"product_id": 1
},
{
"id": 5,
"description": "2 litres",
"discount": null,
"price": "130",
"tax": null,
"company_id": 2,
"product_id": 1
}
]
},
{
"id": 4,
"name": "Silo",
"slug": null,
"product_category_id": 3,
"industry_id": 1,
"category": {
"id": 3,
"name": "Mealie Meal",
"slug": null,
"industry_id": 1
},
"product_attributes": [
{
"id": 4,
"description": "10 kgs",
"discount": null,
"price": "130",
"tax": null,
"company_id": 1,
"product_id": 4
}
]
}
]
and my company object referred to as this.selectedCompaniesDetails in my code and is like this.
[
{
"id": 1,
"name": "Spar",
"slug": null,
"industry_id": 1
},
{
"id": 2,
"name": "Ok",
"slug": null,
"industry_id": 1
},
{
"id": 3,
"name": "TM",
"slug": null,
"industry_id": 1
},
{
"id": 4,
"name": "choppies",
"slug": null,
"industry_id": 1
},
{
"id": 5,
"name": "Bon Marche",
"slug": null,
"industry_id": 1
}
]
I'm wishing to get the totals of all products that are belong to each company. Let me show you my UI.
So what i want is under spar the total should be 250 and under 130 and so forth for all other companies. Thank you in advance

Answer 1

This is one of many solutions. It's improvable, it's just to show you the way.
#1 Create an object where key is company id and value is the array of prices for that company
const priceByCompany = products.reduce((tot, prod) => {
prod.product_attributes.forEach((p) => {
if (!tot[p.company_id]) {
tot[p.company_id] = []
}
const numberPrice = parseInt(p.price, 10)
tot[p.company_id].push(numberPrice)
})
return tot
}, {})
// { 1: [120, 130], 2: [130] }
#2 Reduce all value array to sum them up.
Object.keys(priceByCompany).forEach((company) => {
const total = priceByCompany[company].reduce((tot, price) => tot + price, 0)
priceByCompany[company] = total
})
// { 1: 250, 2: 130 }
See the code in action: Jsfiddle