How to sum multiple different objects in an array using Vuejs?

Question

I am getting started with Vue. I am struggling to calculate the sum of different elements in an object of an array.

My array looks like this:

    sites: [{
       sku: 10001,
       name: "Product A",
       totalPrice: '',
       values: [{
          price: 10,
          discount: 5,
          color: "red"
       },
       {
           price: 15,
           discount: 8,
           color: "black"
       }]
    },
    {
      sku: 10002,
      name: "Product B",
      totalPrice: '',
      values: [{
         price: 13,
         discount: 3,
         color: "purple"
       },
       {
           price: 20,
           discount: 5,
           color: "green"
       }]
   }]

I am trying to sum the price and set it to totalPrice. So the array will change totalPrice as below:

sku: 10001,
      name: "Product A",
      totalPrice: 25,

sku: 10002,
      name: "Product B",
      totalPrice: 33,

I believe I need to use something like the below to sum them, however I cannot figure out how to do this!

computed: {
    total(){ return this.sites.reduce( (total, item) => item.values. price + total  ,0);}
  },

How do I calculate the sum of the price and set it as the totalPrice?

I have traveled SO and find similar threads however nothing that I can get to work with my issue.

weegee · Accepted Answer · 2019-06-16 23:09:28Z

2

computed: {
  total() {
    let newojv = []
    sites.forEach((item, _) => {
      let s = item.values.map((items2, _) => {
        return items2.price;
      })
      let sum = s.reduce((a, b) => a + b);
      newojv.push({
        sku: item.sku,
        name: item.name,
        totalPrice: sum
      });
    });
    return newojv;
  }
}

First for Each of the array of objects below

{
  sku: 10001,
  name: "Product A",
  totalPrice: '',
  values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]
}

And then for Each of the array of objects below

values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]

We take a we map the array to get the values of the price, which is 10,15. Then we reduce the array, add it and then push it.

let sum = s.reduce((a, b) => a + b);
newojv.push({
    sku: item.sku,
    name: item.name,
    totalPrice: sum
});

A working example can be

let sites = [{
  sku: 10001,
  name: "Product A",
  totalPrice: '',
  values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]
}, {
  sku: 10002,
  name: "Product B",
  totalPrice: '',
  values: [{
      price: 13,
      discount: 3,
      color: "purple"
    },
    {
      price: 20,
      discount: 5,
      color: "green"
    }
  ]
}]
let newojv = []
sites.forEach((item, _) => {
  let s = item.values.map((items2, _) => {
    return items2.price;
  })
  let sum = s.reduce((a, b) => a + b);
  newojv.push({
    sku: item.sku,
    name: item.name,
    totalPrice: sum
  });
});
console.log(newojv)

edited Jun 16, 2019 at 23:09

answered Jun 16, 2019 at 22:47

weegee

3,4382 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tbowden Over a year ago

Thanks so much for your help! I'm just trying to figure out how to update my array instead of creating new objects in the array. I'm struggling to figure out how to do this, do you have any pointers? thanks!

weegee Over a year ago

That is not safe. This might generate unexpected results. It's best you use a fresh array instead of the same on you pushed on because we are reading the data from it while pushing to it.

tbowden Over a year ago

Ah ok! So I delete the old array and replace it?

weegee Over a year ago

Why delete the first array? Just push the total to a new array and return that.

Terry Over a year ago

The question is, why do you want to store the totalPrice in the data itself? Like what @weegee proposed, you shouldn't really be mutating your data. The sum of the prices should be a computed property that is abstracted away from the data itself.

|

Collectives™ on Stack Overflow

How to sum multiple different objects in an array using Vuejs?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related