how to add multiple values in javascript?

Question

i have this situation:

...
 for (var i = 0; i < json.length; i++)
 {
  output += '<tr>';
     for ( var objects in json[i])
     {
        if (objects == 'amt_1')
       {
         output += '<td id="amt">' + json[i][objects] + '</td>';
       }
      }
  output += '</tr>';
        }
     output += '<tr">';
     var amt = 0;
     $('#amt').each(function() {
        amt += $(this).text();
     });
     output += '<td>' + amt + '</td>';
     output += '</tr>';
  $('#details').append(output);

 }

this is a part of a table that give's me something like this:

<td id="amt">4.58</td>
<td id="amt">55.74</td>
<td id="amt">193.5</td>
<td></td>

and in the last td i would like the sum of the rest of them with the id = amt what i have seems not to work

any ideas?

Thnaks

Answer 1

The problem is that you are using id's instead of classes, id's are supposed to be unique, so javascript only returns 1 td. Multiple elements however, can share the same class.

Also, the jQuery won't work because the elements haven't been added to the document yet.

for (var i = 0; i < json.length; i++)
{
     output += '<tr>';
     for ( var objects in json[i])
     {
         if (objects == 'amt_1')
         {
             output += '<td class="amt">' + json[i][objects] + '</td>';
         }
      }
      output += '</tr>';
}
output += '<tr">';
$('#details').append(output); //Copied here, this will add the above elements 
                              //to the document subtree, which allows jquery 
                              //to search for them
output = ""; //Reset output
var amt = 0;
$('.amt').each(function() { //Changed to class selector
    amt += parseInt($(this).text());
});
output += '<td>' + amt + '</td>';
output += '</tr>';
$('#details').append(output); //Append result

Answer 2

Like they said you should use a class instead of id

output += '<td class="amt">' + json[i][objects] + '</td>';

Then you must add the output to the DOM before your jQuery selector, $('.amt') , can find the elements

$('#details').append(output);  //<--append BEFORE you select the .amt elements
 var amt = 0;
 $('.amt').each(function() {
    amt += parseFloat($(this).html());  //parseFloat on the html
 });
output = '<tr">';  //<-- reset output here
 output += '<td>' + amt + '</td>';
 output += '</tr>';
$('#details').append(output);

Still it would be better to just sum the amount in your for loop

var total = 0;

...

if (objects == 'amt_1')
   {
     var curAmt = json[i][objects];
     output += '<td class="amt">' + curAmt + '</td>';
     total += parseFloat(curAmt);
   }

...

output += '<td>' + total + '</td>';

Answer 3

You can't have more than one element with the same id on a page. $("#someId") will always select at most 1 element. So, your first problem is you don't even have a list of elements. You can solve that by using class instead.

Once you resolve the id issue, the trouble you'll have is you are trying to add text as though it were a number. First, you convert text to a number in one loop, then you loop through your entire collection again and try to add the textual numbers. Just get the total during the first loop. You'll be adding numbers instead of text, and you'll only have to iterate your collection once.

Also, you don't need to iterate the keys of an object just get a property. You can just reference the property directly: json[i].amt_1

While we're at it, let's not build up the html string, but instead just create the DOM elements directly. And take advantage of $.each() to do our looping.

var total = 0;
$.each(json, function (i, item) {
    var row  = $('<tr>').appendTo("#details");
    $("<td>").appendTo(row).addClass("amt").text(item.amt_1);
    total += item.amt_1;
});
var row = $("<tr>").appendTo("#details");
$("<td>").appendTo(row).text(total);