Summing the values of an object

Hey!

I’m having truble with summing the values of objects specific property. (Maybe called keys and values) EDIT: all the objects are inside a Array.
So far the values just adds after one and another, not summing them. I used this praxis:

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

What am i doing wrong? This shouldn’t be so hard right?

You’re very close. In fact, when I run your function on test arrays it almost runs perfectly (if it’s a text array, there’s a superfluous 0, that that it matters in this case, but it’s still good to be precise).

test = [5,4,3]
test2 = ['a','b','c']
test3 = [5,5,5]
const sumValues = (test) => Object.keys(test).reduce((acc, value) 
                         => acc + test[value], 0);
sumValues(test)
// 12
sumValues(test2)
// '0abc'
sumValues(test3)
// 15

That doesn’t mean it can’t be clarified further:

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

The first observation is your obj will already have a reduce method, so there is no need to invoke Object.keys (it just makes things more complicated).

The second observation is you can define your function outside of the line for extra clarity (though in a real situation you may have it inside if it’s a throwaway line).

In cases like these it’s very helpful to check MDN documentation for guidance:

If it is in fact a plain object, then the values are what we would add up.

a = {a: 2, b: 5, c: 8, d: 13}
sumValues = obj => Object.values(obj).reduce((a, b) => a + b, 0)
console.log(sumValues(a))    //  28

Since we are using zero for a start value it can actually be left off. That is the default.

1 Like

It is actually a Array of objects. Its billVal i want to sum.
Heres the code:

function addBill() {

modal.style.display = "none";

var bill = document.getElementById("billName").value;

var billVal = document.getElementById("billValue").value;

newItem(bill, billVal, id, false);

data.push({

    name: bill,

    value: billVal,

    id: id,

    payed: false

});

billTotal.innerHTML = Object.values(data).reduce((t, {value}) => t + {value}, 0);

localStorage.setItem("Bills", JSON.stringify(data));

};

Thanks a lot for all the tips m8! :slight_smile:

c = [{n: 2}, {n: 5}, {n: 8}, {n: 13}]
sumValues = arr => arr.reduce((a, b) => a + b['n'], 0) 
console.log(sumValues(c))    // 28

so close! :smiley:
The bills are:
Bill 1 300
Bill 2 444
Bill 3 505

And the result is : 0300444505

Any idea why?

var storage = localStorage.getItem(“Bills”);
if (storage !== null) {
var data = JSON.parse(storage);
loadData(data);
var id = data.length;
} else {
id = 0;
data = ;
};

function loadData(array) {
array.forEach(function(bill) {
newItem(bill.name, bill.value, bill.id, bill.payed);
});
sumValues = arr => arr.reduce((a, b) => a + b[‘value’], 0)
document.getElementById(“billTotal”).innerHTML = sumValues(data);
};

function addBill() {
modal.style.display = “none”;
var bill = document.getElementById(“billName”).value;
var billVal = document.getElementById(“billValue”).value;
newItem(bill, billVal, id, false);
data.push({
name: bill,
value: billVal,
id: id,
payed: false
});
localStorage.setItem(“Bills”, JSON.stringify(data));
};

function newItem(name, value, id, payed) {
if(payed == true){
return;
}
var ul = document.getElementById(“list”);
ul.innerHTML += "<li><table><tr><td>" + name + "</td><td>" + value + "kr </td><td><input type='checkbox'></td></li>";
bill = document.getElementById(“billName”).value = “”;
billVal = document.getElementById(“billValue”).value = “”;
};

Should that be in the addBill() function?

Maybe, i just wanted the total sum to update as soon the page was loaded… but i tried to put it in the addBill() function and it still just puts the values after one and another… should i rethink the whole thing?

There are functions inside functions. Not sure that is what you want.