Dynamically create a table with values from an object

Question

I want to create a table that looks like this:

--------------------------------------------------
| | USD |CAD |
--------------------------------------------------
|Smallest Donation | 100 |250 |
--------------------------------------------------
|Largest Donation | 9200 |7600 |
--------------------------------------------------
| |
--------------------------------------------------
|Total Donation | 12500 |11000 |
--------------------------------------------------

using the values from this object:

perCurrency: {USD:{0:100, 1:200, 2:9200, 3:1500, 4:1500}, PHP:{0:250, 1:7600, 2:150, 3:3000}}

I have this code and it actually works, though I believe there's an easier and shorter way to this using only one loop.

var numOfCurrency = Object.keys(perCurrency).length + 1;
var donation_table = '';
donation_table += '<table id="donation_table" class="table table-condensed">';
donation_table += '<tr><td style="font-weight:bold; width:160px">&nbsp;</td>';
$.each(perCurrency, function(index, value){
 donation_table += '<td width="150px">'+index+'</td>';
});
donation_table += '</tr><tr><td style="font-weight:bold; width:160px">Smallest Donation</td>';
$.each(perCurrency, function(index, value){
 var lowest = Infinity;
 $.each(value, function(k, v){
 if (v < lowest) lowest = v;
 });
 donation_table += '<td>'+lowest+'</td>';
});
donation_table += '</tr><tr><td style="font-weight:bold; width:160px">Largest Donation</td>';
$.each(perCurrency, function(index, value){
 var highest = 0;
 $.each(value, function(k, v){
 if (v > highest) highest = v;
 });
 donation_table += '<td>'+highest+'</td>';
});
donation_table += '</tr><tr><td colspan="'+numOfCurrency+'">&nbsp;</td></tr><tr><td style="font-weight:bold; width:160px">Total Donation</td>';
$.each(perCurrency, function(index, value){
 var total = 0;
 $.each(value, function(k, v){
 total = total + v;
 });
 donation_table += '<td>'+total+'</td>';
});
donation_table += '</tr></table>';
$("#giving_capacity").html(donation_table);

I am trying to put this table in a div with an id #giving_capacity.

• ewizard: i dont think condensing everything to one loop will make things run that much faster - looks like what you are doing is good.
• guest271314: numOfCurrency and donationTable appear undefined utilizing piece at OP. Also, at perCuererrency object, PHP is named property, instead of CAD. Adjusted at jsfiddle, see jsfiddle.net/guest271314/CMwM2

Answer 1

I rewrite in my style with only loop. It maybe easier to read.

perCurrency = {
 USD: { 0:100, 1:200, 2:9200, 3:1500, 4:1500 },
 CAD: { 0:250, 1:7600, 2:150, 3:3000 }
};
var numOfCurrency = Object.keys(perCurrency).length + 1;
var donation_table;
donation_table = $('<table>').attr('id', 'donation_table').addClass('table table-condensed'));
$.each(perCurrency, function(index, currency) {
 var lowestInCurrency = Infinity,
 highestInCurrency = 0,
 totalInCurrency = 0;
 $.each(currency, function(k, v){
 totalInCurrency = totalInCurrency + v;
 if (v < lowestInCurrency) lowestInCurrency = v;
 if (v > highestInCurrency) highestInCurrency = v;
 });
 donation_table.append(
 $('<tr>').append(
 $('<td>').css('font-weight', 'bold').css('width', '160px').html('&nbsp;')
 ).append(
 $('<td>').css('width', '150px').text(index)
 )
 ).append(
 $('<tr>').append(
 $('<td>').css('font-weight', 'bold').css('width', '160px').text('Smallest Donation')
 ).append(
 $('<td>').text(lowestInCurrency)
 )
 ).append(
 $('<tr>').append(
 $('<td>').css('font-weight', 'bold').css('width', '160px').text('Largest Donation')
 ).append(
 $('<td>').text(highestInCurrency)
 )
 ).append(
 $('<tr>').append(
 $('<td>').attr('colspan', numOfCurrency).html('&nbsp;')
 )
 ).append(
 $('<tr>').append(
 $('<td>').css('font-weight', 'bold').css('width', '160px').text('Total Donation')
 ).append(
 $('<td>').text(totalInCurrency)
 )
 );
});
$("#giving_capacity").html(donation_table);