392

I have something like this:

$scope.traveler = [
            {  description: 'Senior', Amount: 50},
            {  description: 'Senior', Amount: 50},
            {  description: 'Adult', Amount: 75},
            {  description: 'Child', Amount: 35},
            {  description: 'Infant', Amount: 25 },
];

Now to have a total Amount of this array I'm doing something like this:

$scope.totalAmount = function(){
       var total = 0;
       for (var i = 0; i < $scope.traveler.length; i++) {
              total = total + $scope.traveler[i].Amount;
            }
       return total;
}

It's easy when is only one array, but I have others arrays with a different property name that I would like to sum.

I would be happier If I could do something like this:

$scope.traveler.Sum({ Amount });

But I don't know how to go through this in a way that I could reuse it in the future like this:

$scope.someArray.Sum({ someProperty });
2
  • The reduce method is perfect for this. Here is a great explainer.
    – Josh
    Commented Jan 2, 2021 at 11:13
  • 38
    TL;dr : 🤓 myArray.map(i=>i.myProperty).reduce((a,b)=>a+b);
    – ashleedawg
    Commented Nov 15, 2021 at 23:05

20 Answers 20

318

I know that this question has an accepted answer but I thought I'd chip in with an alternative which uses array.reduce, seeing that summing an array is the canonical example for reduce:

$scope.sum = function(items, prop){
    return items.reduce( function(a, b){
        return a + b[prop];
    }, 0);
};

$scope.travelerTotal = $scope.sum($scope.traveler, 'Amount');

Fiddle

3
  • brilliant answer, is it possible to put $scope.travelerTotal = $scope.sum($scope.traveler, 'Amount'); at the beginning of controller function ?
    – Mo.
    Commented Dec 3, 2014 at 10:18
  • Yes if it comes after the sum function is created. Commented Dec 3, 2014 at 10:39
  • 2
    This can result in NaN, if the prop does not exist (undefined) in one of the objects in the array. I don't know if this is the best check, but it worked for my case: function(items, prop) { return items.reduce(function(a, b) { if (!isNaN(b[prop])) { return a + b[prop]; } else { return a } }, 0); } Commented Oct 31, 2017 at 22:00
267

Use reduce with destructuring to sum Amount:

const traveler = [
  { description: 'Senior', Amount: 50 },
  { description: 'Senior', Amount: 50 },
  { description: 'Adult', Amount: 75 },
  { description: 'Child', Amount: 35 },
  { description: 'Infant', Amount: 25 },
];

console.log(traveler.reduce((n, {Amount}) => n + Amount, 0));

5
  • 14
    Simple and easy, my chosen answer
    – Eagle
    Commented Sep 29, 2020 at 9:00
  • 5
    this should be the top answer
    – ncesar
    Commented Apr 1, 2021 at 18:18
  • 3
    Simple and powerful approach - should have been the top of all answers. Thanks @patrick Commented Jun 2, 2021 at 3:51
  • 1
    Really great solution. I modified it a bit: (traveler.reduce((n, {Amount}) => n + Number(Amount), 0) Commented Apr 19, 2022 at 6:33
  • 1
    This finally made it clear how i can use reduce properly. Thanks
    – HotFix
    Commented Mar 26, 2023 at 2:19
223

Just another take, this is what native JavaScript functions Map and Reduce were built for (Map and Reduce are powerhouses in many languages).

var traveler = [{description: 'Senior', Amount: 50},
                {description: 'Senior', Amount: 50},
                {description: 'Adult', Amount: 75},
                {description: 'Child', Amount: 35},
                {description: 'Infant', Amount: 25}];

function amount(item){
  return item.Amount;
}

function sum(prev, next){
  return prev + next;
}

traveler.map(amount).reduce(sum);
// => 235;

// or use arrow functions
traveler.map(item => item.Amount).reduce((prev, next) => prev + next);

Note: by making separate smaller functions we get the ability to use them again.

// Example of reuse.
// Get only Amounts greater than 0;

// Also, while using Javascript, stick with camelCase.
// If you do decide to go against the standards, 
// then maintain your decision with all keys as in...

// { description: 'Senior', Amount: 50 }

// would be

// { Description: 'Senior', Amount: 50 };

var travelers = [{description: 'Senior', amount: 50},
                {description: 'Senior', amount: 50},
                {description: 'Adult', amount: 75},
                {description: 'Child', amount: 35},
                {description: 'Infant', amount: 0 }];

// Directly above Travelers array I changed "Amount" to "amount" to match standards.

function amount(item){
  return item.amount;
}

travelers.filter(amount);
// => [{description: 'Senior', amount: 50},
//     {description: 'Senior', amount: 50},
//     {description: 'Adult', amount: 75},
//     {description: 'Child', amount: 35}];
//     Does not include "Infant" as 0 is falsey.
4
  • 4
    return Number(item.Amount); to check for number only
    – xkeshav
    Commented Aug 23, 2017 at 6:14
  • 4
    I'd only argue with the name of the variable prev in the reduce function. To me, that implies that you're getting the previous value in the array. But really it's the reduction of all previous values. I like accumulator, aggregator or sumSoFar for clarity.
    – carpiediem
    Commented Jan 25, 2019 at 12:36
  • 1
    I do think this is the best anwser. Commented Jul 27, 2020 at 23:03
  • 1
    Note that the (arguable) advantages in separating the .map() and reduce() calls of having composable functions come at the cost of decreased performance because both .map() and .reduce() will separately iterate through the entire array. If you're processing large volumes of data, you would be better off using a single for-loop than separate array methods
    – aleph_one
    Commented Nov 10, 2021 at 1:03
199

Updated Answer

Due to all the downsides of adding a function to the Array prototype, I am updating this answer to provide an alternative that keeps the syntax similar to the syntax originally requested in the question.

class TravellerCollection extends Array {
    sum(key) {
        return this.reduce((a, b) => a + (b[key] || 0), 0);
    }
}
const traveler = new TravellerCollection(...[
    {  description: 'Senior', Amount: 50},
    {  description: 'Senior', Amount: 50},
    {  description: 'Adult', Amount: 75},
    {  description: 'Child', Amount: 35},
    {  description: 'Infant', Amount: 25 },
]);

console.log(traveler.sum('Amount')); //~> 235

Original Answer

Since it is an array you could add a function to the Array prototype.

traveler = [
        {  description: 'Senior', Amount: 50},
        {  description: 'Senior', Amount: 50},
        {  description: 'Adult', Amount: 75},
        {  description: 'Child', Amount: 35},
        {  description: 'Infant', Amount: 25 },
    ];
        
  Array.prototype.sum = function (prop) {
      var total = 0
      for ( var i = 0, _len = this.length; i < _len; i++ ) {
          total += this[i][prop]
      }
      return total
  }
        
  console.log(traveler.sum("Amount"))

4
142

I always avoid changing prototype method and adding library so this is my solution:

Using reduce Array prototype method is sufficient

// + operator for casting to Number
items.reduce((a, b) => +a + +b.price, 0);
5
  • 6
    The second parameter (which determines the initial value of a) does the trick when using reduce with objects: in the first iteratorion, a won't be the first object of the items array, instead it will be 0.
    – Parziphal
    Commented Jul 12, 2018 at 23:32
  • As a function: const sumBy = (items, prop) => items.reduce((a, b) => +a + +b[prop], 0); Usage: sumBy(traveler, 'Amount') // => 235
    – Rafi
    Commented Nov 29, 2018 at 9:58
  • 11
    As an old school programmer, the reduce syntax looks totally obtuse to me. My brain still "natively" understands this better: let total = 0; items.forEach((item) => { total += item.price; });
    – AndrWeisR
    Commented Jan 24, 2019 at 1:01
  • 2
    @AndrWeisR I like your solution best. Also the use of native as it's such a buzz word that hardly gets explained what it's meant for. I made an even more basic line of code based on your solution and it worked great. let total = 0; items.forEach(item => total += item.price) Commented Jan 26, 2019 at 23:03
  • Thank you. this is best solution for my problem. Commented Jan 28, 2022 at 19:08
50

Alternative for improved readability and using Map and Reduce:

const traveler = [
    {  description: 'Senior', amount: 50 },
    {  description: 'Senior', amount: 50 },
    {  description: 'Adult', amount: 75 },
    {  description: 'Child', amount: 35 },
    {  description: 'Infant', amount: 25 },
];

const sum = traveler
  .map(item => item.amount)
  .reduce((prev, curr) => prev + curr, 0);

Re-useable function:

const calculateSum = (obj, field) => obj
  .map(items => items.attributes[field])
  .reduce((prev, curr) => prev + curr, 0);
2
  • Perfect mate, "+1" Commented Feb 26, 2020 at 10:51
  • Use reduce default value .reduce(*** => *** + ***, 0); others was missing that "+1"
    – FDisk
    Commented Mar 26, 2020 at 18:20
26

It's working for me in TypeScript and JavaScript:

let lst = [
     { description:'Senior', price: 10},
     { description:'Adult', price: 20},
     { description:'Child', price: 30}
];
let sum = lst.map(o => o.price).reduce((a, c) => { return a + c });
console.log(sum);

I hope is useful.

23

You can do the following:

$scope.traveler.map(o=>o.Amount).reduce((a,c)=>a+c);
22

I thought I'd drop my two cents on this: this is one of those operations that should always be purely functional, not relying on any external variables. A few already gave a good answer, using reduce is the way to go here.

Since most of us can already afford to use ES2015 syntax, here's my proposition:

const sumValues = (obj) => Object.keys(obj).reduce((acc, value) => acc + obj[value], 0);

We're making it an immutable function while we're at it. What reduce is doing here is simply this: Start with a value of 0 for the accumulator, and add the value of the current looped item to it.

Yay for functional programming and ES2015! :)

0
18

I'm not sure this has been mentioned yet. But there is a lodash function for that. Snippet below where value is your attribute to sum is 'value'.

_.sumBy(objects, 'value');
_.sumBy(objects, function(o) { return o.value; });

Both will work.

6

can also use Array.prototype.forEach()

let totalAmount = 0;
$scope.traveler.forEach( data => totalAmount = totalAmount + data.Amount);
return totalAmount;
6

From array of objects

function getSum(array, column)
  let values = array.map((item) => parseInt(item[column]) || 0)
  return values.reduce((a, b) => a + b)
}

foo = [
  { a: 1, b: "" },
  { a: null, b: 2 },
  { a: 1, b: 2 },
  { a: 1, b: 2 },
]

getSum(foo, a) == 3
getSum(foo, b) == 6
5

You can use Array.prototype.reduce:

const sum = traveler.reduce((acc , val)=>{
   return acc + val.amount;
} ,0);
4

Here is a one-liner using ES6 arrow functions.

const sumPropertyValue = (items, prop) => items.reduce((a, b) => a + b[prop], 0);

// usage:
const cart_items = [ {quantity: 3}, {quantity: 4}, {quantity: 2} ];
const cart_total = sumPropertyValue(cart_items, 'quantity');
4

After going through these answers I think that actually a for (or forEach or for of with await) loop is much more readable that than reduce or even map and reduce. Think of:

  1. coming back to this code after 6 months or maintaining this by someone else. I think your approach of using a loop is good enough.
  2. extending this function in the future, in case you might want to add a currency conversion or similar. Doing this in a one-liner is not a great idea.

var traveler = [
  {Amount: 50,  description: 'Senior'},
  {Amount: 50,  description: 'Senior'},
  {Amount: 75,  description: 'Adult'},
  {Amount: 35,  description: 'Child'},
  {Amount: 25,  description: 'Infant'}
];

var sumFromArray = (propertyName, array) => {
  let sum = 0;
  array.forEach(item => {
    sum += item[propertyName] ?? 0;
  });
  return sum;
};

var sumOfTraveler = sumFromArray('Amount', traveler);
console.log(sumOfTraveler);

Using types your function definition might look like:

const sumFromArray = (propertyName: string, array: Array<{[propertyName: string]: number}>) => { ... };

See here for more details: TypeScript A computed property name in a type literal must directly refer to a built-in symbol

I have nothing against map, reduce or one-liners, this is just food for thought.

1

How to sum array of object using Javascript

const traveler = [
  {  description: 'Senior', Amount: 50},
  {  description: 'Senior', Amount: 50},
  {  description: 'Adult', Amount: 75},
  {  description: 'Child', Amount: 35},
  {  description: 'Infant', Amount: 25 }
];

const traveler = [
    {  description: 'Senior', Amount: 50},
    {  description: 'Senior', Amount: 50},
    {  description: 'Adult', Amount: 75},
    {  description: 'Child', Amount: 35},
    {  description: 'Infant', Amount: 25 },
];
function sum(arrayData, key){
   return arrayData.reduce((a,b) => {
  return {Amount : a.Amount + b.Amount}
})
}
console.log(sum(traveler))
`

1

Here's a solution I find more flexible:

function sumOfArrayWithParameter (array, parameter) {
  let sum = null;
  if (array && array.length > 0 && typeof parameter === 'string') {
    sum = 0;
    for (let e of array) if (e && e.hasOwnProperty(parameter)) sum += e[parameter];
  }
  return sum;
}

To get the sum, simply use it like that:

let sum = sumOfArrayWithParameter(someArray, 'someProperty');
1

i honestly got frustrated while reading all the code that where posted as a solution to this cus i'm a new be and i'n trying to add a functionality to a simple app for practice. The simple way to solve this is

let testArray = [5, 7, 8, 4];

function(){
sum = 0;
for(let i = 0; i < testArray.length; i++){
    sum += testArray[i];
}

// will give you the sum of the array

1
  • Its old but it works guys. Why all the downvotes? I know most modern JS devs would reject this but is there a performance (one that has actually been measured) reason to reject this? I wouldn't use it professionally because of peer pressure from the team and if the team doesn't want it then its fine. But for a personally project, if there is no performance penalty then its fine. Its just code.
    – Andy
    Commented May 31, 2022 at 11:17
0

I was already using jquery. But I think its intuitive enough to just have:

var total_amount = 0; 
$.each(traveler, function( i, v ) { total_amount += v.Amount ; });

This is basically just a short-hand version of @akhouri's answer.

0

You can use jscollection library for database like query job easily in just one line https://github.com/somnathpanja/jscollection

var total = List.extend(traveler).select('Amount').sum();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.