Get the sum of values in array

Question

I have this sample code:

<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
                   <p id="setTotal"> </p>

I want to get the total of those values under class "price" however my output goes something like:

1 4 6 Sum is 0[object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement].

My JavaScript code is:

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());
    totalPrice += this;
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

Do you need it in array, or string output is ok? You are trying both ways, as i can see? — sinisake
– sinisake, Commented Sep 21, 2015 at 15:32

Jesse · Accepted Answer · 2015-09-21 15:30:09Z

3

You need to get the text from the td and parse it as a number.

fiddle:http://jsfiddle.net/4rwbyx3n/

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());

    var price = $(this).text();
    totalPrice += Number(price);
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

answered Sep 21, 2015 at 15:30

Jesse

1,2621 gold badge9 silver badges19 bronze badges

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

2 Comments

Norseback Over a year ago

I understood this code better than the rest. Thanks for the help! :D

Jesse Over a year ago

No problem, glad I could help :)

jds · Accepted Answer · 2015-09-21 20:01:23Z

2

You have two issues:

You're incrementing totalPrice by this, which is an HTML element.
You are not converting the string value from the HTML into an integer.

Here are the changes, with some minor improvements/suggestions:

var totalPrice = 0;
$("td.price").each(function(i, td) {
    totalPrice += parseInt($(td).text());
});
$('#setTotal').html("Sum is " + totalPrice + ".");

edited Sep 21, 2015 at 20:01

answered Sep 21, 2015 at 15:31

jds

8,31013 gold badges69 silver badges114 bronze badges

2 Comments

Olivier De Meulder Over a year ago

why not move the $setTotal line outside of the .each loop?

jds Over a year ago

Yeah, that's better, assuming Razor doesn't want to use a timeout for visualization.

user405398 · Accepted Answer · 2015-09-21 15:29:51Z

1

Try:

$("td.price").each(function(){

 arr.push($(this).text());
 totalPrice += (+$(this).text());
 document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";

});

The reason for your earlier result is you were concatenating HTML elements, not the text in it.

answered Sep 21, 2015 at 15:29

user405398

Comments

Lars Anundskås · Accepted Answer · 2015-09-21 18:08:21Z

1

something like this:

With javascript's array.map you can transform an array of something, into something else.

In this case, an array of html elements into an array of numbers.

using reduceRight on the result with a simple add function as a parameter, each element of the array is accumulated and summed one by one.

we need to wrap it in jQuery.makeArray, since jQuery $(selector).map will return a jQuery object, and we want a native javascript array.

var sum = jQuery.makeArray($("td.price").map(function(idx, num) { 
      return parseInt($(num).text()); 
}).reduceRight(function(a,b){return a+b;}));

and then

document.getElementById("setTotal").innerHTML = "Sum is "+sum+ ".";

or with jquery

$("#setTotal").text("Sum is " + sum + ".");

edited Sep 21, 2015 at 18:08

answered Sep 21, 2015 at 15:47

Lars Anundskås

1,3551 gold badge10 silver badges25 bronze badges

Comments

indubitablee · Accepted Answer · 2015-09-21 15:30:42Z

0

you have to parseFloat the text of the element. and you also need jquery for what youre doing with the .each() function

var totalPrice = 0;

$("td.price").each(function(){
  totalPrice += parseFloat($(this).text());
  document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
<p id="setTotal"> </p>

answered Sep 21, 2015 at 15:30

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Comments

sinisake · Accepted Answer · 2015-09-21 15:35:47Z

0

You are pushing html elements/objects to your sum, not sure why, and since you are already using jQuery, no need for native JS selectors and methods:

var totalPrice = 0;


$("td.price").each(function(){


    totalPrice +=parseInt($(this).text());

}); 
$("#setTotal").html("Sum is "+totalPrice+ ".");

Also, you can move price showing from each() loop, no need for updates inside loop...

http://jsfiddle.net/216fouoy/

answered Sep 21, 2015 at 15:35

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Get the sum of values in array

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related