how to format Javascript loop html table

Question

my table columns are amount, price, value, date, notes

addCommas and round are formatting functions

the json data looks like this

[{"amount":"19905405",
  "price":"3.7",
  "value":"736500",
  "date":"2012-02-29", 
  "notes":""
},
{"amount":"10000000",
 "price":"2",
 "value":"200000",
 "date":"2011-12-05",
 "notes":"test one only"
 }]

inside the $.ajax({... success:function(store){... this is my javascript loop to draw the table

$("#table_a").empty();

var table = '<tbody><tr><td style="ba.....rest of header row string';
$.each(store, function(row, i) {
   table += '<tr>';
   table += '<td><span>' + addCommas(round(i/1000000,2)) + "m" + '</span></td>';
   table += '<td><span>' + i + '</span></td>';
   table += '<td><span>' + "$" + addCommas(round(i/1000000,2)) + "m" + '</span></td>';
   table += '<td><span>' + i + '</span></td>';
   table += '<td><span>' + i + '</span></td>';
   table += '</tr>';
});
table += '</tr></tbody>';
$("#table_a").append(table);

the end result currently looks like this

enter image description here

how do I get the loop right to add formatting to the cell data ?

When you say add formatting to the cell data are you talking about css? Please be more specific. — The Muffin Man
– The Muffin Man, Commented Jul 16, 2012 at 22:31
by formatting I only mean applying the addCommas or round function so 1000000 becomes $1m. the code above results in NaNm in table cells where formatting funcs apply, and [object Object] where i is not formatted. — Ben
– Ben, Commented Jul 16, 2012 at 22:37
there's no issue with addCommas or round, they work fine — Ben
– Ben, Commented Jul 16, 2012 at 22:38
did that guy tick it down, then remove his answer cause he didn't like my response? it just a q&a site buddy, maybe you could relax a little — Ben
– Ben, Commented Jul 16, 2012 at 23:44

Community · Accepted Answer · 2017-05-23 12:19:42Z

got it...

$("#table_a").empty();

var table = '<tbody><tr><td style="ba.....rest of header row string';
$.each(store, function(i, data) {
   table += '<tr>';
   table += '<td><span>' + addCommas(round(store[i].amount/1000000,2)) + "m" + '</span></td>';
   table += '<td><span>' + store[i].price + '</span></td>';
   table += '<td><span>' + "$" + addCommas(round(store[i].value/1000000,2)) + "m" + '</span></td>';
   table += '<td><span>' + store[i].date + '</span></td>';          
   table += '<td><span>' + store[i].notes + '</span></td>';
   table += '</tr>';
});
table += '</tr></tbody>';
$("#table_a").append(table);

thanks Phil Jackson

https://stackoverflow.com/a/2529958/1185018

Collectives™ on Stack Overflow

how to format Javascript loop html table

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related