CODEWITHSUNDEEP
htmlvue.js
Brian Highforce Thomas
Brian Highforce Thomas

Reputation: 372

vue.js - how to create a nested arrays

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.enter image description here

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

Upvotes: 0

Views: 186

Answers (1)

Kapcash
Kapcash

Reputation: 6929

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

Upvotes: 1

Related Questions