Auto append table row (at bottom) showing total computation

Question

I have a data to display in html table. The data comes from the 3rd party server(php) using ajax request. The data are well displayed using this code: HTML:

 <table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

And the ajax call where in the data will display on success ( success: function(data, status, jqXHR){ ):

data.forEach(function(row) {
                    var productname = row.uproducts_product;
                    var productico = productname.replace(/\s+/g, "-") + '.png';
                    
                    var productcost = row.uproducts_total_investment;
                    
                    var str = '<tr>'; 
                    str += '<td>' + '<img class="product_icon" src="images/products/icon-'+ productico +'">' + '<div class="productname">'+ row.uproducts_product + '</div></td>';
                    str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' +  row.uproducts_date + '</span></div> </td>';
                    str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
                    str += '<td><span class="textinfo">' + productcost + '</td>';
                    str += '</tr>';
                    
                    $('#tbl-product').append(str);
                   
                });

So, the items are displayed like this

product | date | quantity | cost

A | 12-01-2015 | 2 | 2,100

B | 01-04-2016 | 4 | 5,300

But below the product items, I want to add a row which auto compute the total quantity as well as the total cost. Example:

product | date | quantity | cost

A | 12-01-2015 | 2 | 2,100.00

B | 01-04-2016 | 4 | 5,300.00

Total | 6(quantity) | 7,400.00(cost)

Updated1 Alternatives: I created an alternative here, I added a variable for the computed total in the array where the server respond it as json data. So the data now look like this:

[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"investment":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date":"2015-03-01",
"cost":"1500"
},
{
"total_qty":"2"
"total_cost":"4500"
}]

So, If I use this method, is it easier to append it as a row below the product items? How?

Answer 1

You've to declare variables for quantity and for total before foreach loop and then add values to it. Finally append a new tr after the each loop with values.

Your code would look like this:

var qty = 0,
  total = 0;

data.forEach(function(row) {
  var productname = row.uproducts_product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.uproducts_total_investment;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + row.uproducts_product + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.uproducts_date + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.uproducts_quantity))
    qty += parseFloat(row.uproducts_quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');

Explanation:

• var qty = 0, total = 0; Declare variables and set it's value to 0. More details.
• if (!isNaN(row.uproducts_quantity)) will check whether row.uproducts_quantity value is a number or not. More details.
• parseFloat(row.uproducts_quantity) will convert the string to integer. More details.
• qty += parseFloat(row.uproducts_quantity); will add the value to qty variable in each loop.
• total.toFixed(2) will convert the number into a string, keeping only two decimals. More Details

---

Updated as per OP question updates

First of all your json data is not in correct format. Second one you can use jquery $.eachjquery each to iterate through the json object. Refer jquery loop on Json data using $.each and jQuery looping .each() JSON key/value not working

var data = [{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-01-04",
"cost":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-03-01",
"cost":"1500"
}];

$(function(){
  var qty = 0,
  total = 0;

$.each(data, function(i, row) {
  var productname = row.product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.cost;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + productname + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.open + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.quantity))
    qty += parseFloat(row.quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');
  
});

table {
  width:100%;
  border-collapse:collapse;
}
table th, table td {
  border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

jsfiddle output.

Just compare the json object with the example object I have created here. And you can use the server sided sum amount if you use for (i=0; i > (obj.length-1); i++) loop and finally get the last object key and value for total row.

Answer 2

There is no way to show summary automatically. You need create other variable in server side and then compute value from list objects to this variable. Bind summary variable to html as a normal row.