Sum of a javascript array returns a string concatenation of all the numbers

Question

I'm having a php json_encode object fetched by ajax. whet I want to do is to sum this array. Here's what I did so far:

var json = $.parseJSON(data);
var tot = new Array();
for (var i = 0; i < json.length; ++i) {
   tot.push(json[i].final_total);
   $('table tbody').append("<tr><td>" + json[i].order_id + "</td><td>" + json[i].final_total + "</td></tr>");
}

Now I want to sum this array. I tried this:

var sum = tot.reduce(function(pv, cv) { return pv + cv; }, 0);
$("#total").html( sum );

But the result is:

09.748.529.129.129.119.59.79.89.79.89.79.79.79.79.79.79719.248.59.79 ......

I also tried:

myFunction(tot); 

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("total").innerHTML = item.reduce(getSum);
}

But I got the same result above (Numbers written next to each other).

I also tried this:

var tot = 0;
for (var i = 0; i < json.length; ++i) {
   tot += json[i].final_total);
   $('table tbody').append("<tr><td>" + json[i].order_id + "</td><td>" + json[i].final_total + "</td></tr>");
}
$("#total").html( tot );

But I got the same result above (Numbers written next to each other).

So what is the proper way to sum an array in javascript?

use a [`parseInt()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) — happymacarts, Feb 02 '17 at 18:37
Seems like `json[i].final_total` are strings, so your reduce just concatenates them. You could for example `tot.push(+json[i].final_total);`. The unary `+` will cast the value as a number. — Ilja Everilä, Feb 02 '17 at 18:41
Possible duplicate of [JavaScript string and number conversion](http://stackoverflow.com/questions/971039/javascript-string-and-number-conversion) — Makyen, Feb 02 '17 at 21:05

ibrahim mahrir · Accepted Answer · 2017-02-02T18:45:22.120

10

You have to use parseInt (if the numbers are Integers), parseFloat (if they are Floats) or Number (if not sure) to explicitly interpret them as numbers like:

sum = tot.reduce((a, n) => (a + Number(n)), 0);

edited Feb 02 '17 at 18:45

answered Feb 02 '17 at 18:39

ibrahim mahrir

31,174
5
48
73

Thanks a lot it works fine. – PHP User Feb 02 '17 at 18:54

Mladen Ilić · Answer 2 · 2018-03-29T16:07:25.950

3

Array elements are strings, in order to properly add them, they have to be casted to integer:

var sum = tot.reduce(function(a, b) {
  return parseFloat(a) + parseFloat(b);
}, 0);

Taken from MDN:

the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

The is a common issue caused by + operator used for both string concatenation and addition. Issue is best described with following example:

var result = '1' + 3 + 3 + 7 //result is '1337'

Edit: @Pointy - Nice catch, thanks! :)

edited Mar 29 '18 at 16:07

answered Feb 02 '17 at 18:37

Mladen Ilić

1,667
1
17
21

Those values look like they've got fractional parts, so `parseInt()` is the wrong approach. – Pointy Feb 02 '17 at 18:38
Plus no need to parseInt `a`. It already a number. – ibrahim mahrir Feb 02 '17 at 18:39

score 1 · Answer 3 · edited Nov 06 '19 at 13:46

1

you will need to use a parse int because its concatenating the sting instead of adding integers

var sum = tot.reduce(function(pv, cv) { return parseInt(pv) + parseInt(cv); }, 0);

parseInt

edited Nov 06 '19 at 13:46

Mickaël Leger

3,426
2
17
36

answered Feb 02 '17 at 18:40

happymacarts

2,547
1
25
33

Sum of a javascript array returns a string concatenation of all the numbers

3 Answers3

Linked

Related