How to count the sum of values in an array of objects in JavaScript?

Question

It's such an easy task, but somehow I'm stuck. I have an array of objects of product items that looks like this:

[{id: 1, price: 30, quantity: 2}, {id: 2, price: 20, quantity: 4}, {id: 3, price: 10, quantity: 2}]

I need to count the total price of all items, which should be: the price of a specific product multiplied by quantity and the same for previous products. Example: (30*2)+(20*4)+(10*2)

My code looks like this:

    items.forEach(function (item) {
           let sum = item.price * item.quantity;
           console.log(sum);
});

The output looks like:

60
80
20

But I need to count the total which should be 160 and render it to the page and somehow I can't figure out the way to do that

So move your let sum outside of the for loop ... Seriously, your one step away from solving this yourself. — Taplar
– Taplar, Commented Feb 11, 2020 at 14:22
.reduce((p, { price, quantity }) => p + price*quantity, 0) — ASDFGerte
– ASDFGerte, Commented Feb 11, 2020 at 14:24
I notice that you don't use + anywhere in your code; that's a bad sign if you are trying to compute a sum. — Scott Hunter
– Scott Hunter, Commented Feb 11, 2020 at 14:25
@Taplar: at least one step, but more than just moving let sum outside of loop. — Scott Hunter
– Scott Hunter, Commented Feb 11, 2020 at 14:26

Kevin · Accepted Answer · 2020-02-11 15:05:13Z

11

The Array.prototype.reduce() method is best suited for operations like this (sum total).

In my answer below, sum is the accumulator and is initially set to 0. The accumulator is the value previously returned by the callback. The { price, quantity } is object destructering of the current value.

const sumTotal = arr =>
  arr.reduce((sum, { price, quantity }) => sum + price * quantity, 0)

const data = [
  { id: 1, price: 30, quantity: 2 },
  { id: 2, price: 20, quantity: 4 },
  { id: 3, price: 10, quantity: 2 },
]

const total = sumTotal(data)

console.log(total) // 160

Here is a similar example.

edited Feb 11, 2020 at 15:05

answered Feb 11, 2020 at 14:33

Kevin

4613 silver badges10 bronze badges

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

1 Comment

Kevin Over a year ago

Here is a similar example. sum is the accumulator, which is initially set to 0. The { price, quantity } is object destructering of the current value. The return value of the callback at each step becomes the accumulator (sum) value of the next step.

Damien · Accepted Answer · 2020-02-11 14:32:04Z

3

You are close to getting the answer. I modified slightly your code and get the expected result. See below.

const items = [{id: 1, price: 30, quantity: 2}, {id: 2, price: 20, quantity: 4}, {id: 3, price: 10, quantity: 2}];

const sumItems = () => {
let sum = 0;
items.forEach(function(item) {
    let calculation = item.price * item.quantity;
    sum += calculation;
})
console.log(sum);
};

sumItems();

answered Feb 11, 2020 at 14:32

Damien

1,6501 gold badge14 silver badges26 bronze badges

Comments

Mohammad Faisal · Accepted Answer · 2020-02-12 05:17:25Z

2

let items = [
  {id: 1, price: 30, quantity: 2}, 
  {id: 2, price: 20, quantity: 4}, 
  {id: 3, price: 10, quantity: 2}
]

let total = items.reduce((sum,item) => sum + item.price * item.quantity, 0);

console.log(total);

edited Feb 12, 2020 at 5:17

answered Feb 11, 2020 at 14:30

Mohammad Faisal

2,4621 gold badge20 silver badges28 bronze badges

Comments

Zulqarnain Jalil · Accepted Answer · 2020-02-11 14:33:08Z

0

var products =[{id: 1, price: 30, quantity: 2}, {id: 2, price: 20, quantity: 4}, {id: 3, price: 10, quantity: 2}]
console.log(products.map(x=> x.price*x.quantity).reduce((a, b) => a + b, 0))

answered Feb 11, 2020 at 14:33

Zulqarnain Jalil

1,69117 silver badges27 bronze badges

Comments

Kevin H · Accepted Answer · 2020-02-11 14:47:03Z

0

If you can use an external library, I suggest using the sumBy method from lodash library

Example:

_.sumBy(items, function(item) { return item.price * item.quantity; });

edited Feb 11, 2020 at 14:47

Kevin H

1,4194 gold badges22 silver badges43 bronze badges

answered Feb 11, 2020 at 14:41

Pococapace

195 bronze badges

Collectives™ on Stack Overflow

How to count the sum of values in an array of objects in JavaScript?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related