Dynamically create a table with values from an object 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 += '&lt;table id="donation_table" class="table table-condensed"&gt;';
donation_table += '&lt;tr&gt;&lt;td style="font-weight:bold; width:160px"&gt;&amp;nbsp;&lt;/td&gt;';

$.each(perCurrency, function(index, value){
  donation_table += '&lt;td width="150px"&gt;'+index+'&lt;/td&gt;';
});

donation_table += '&lt;/tr&gt;&lt;tr&gt;&lt;td style="font-weight:bold; width:160px"&gt;Smallest Donation&lt;/td&gt;';
$.each(perCurrency, function(index, value){
  var lowest = Infinity;
  $.each(value, function(k, v){
    if (v &lt; lowest) lowest = v;
  });
  donation_table  += '&lt;td&gt;'+lowest+'&lt;/td&gt;';
});

donation_table += '&lt;/tr&gt;&lt;tr&gt;&lt;td style="font-weight:bold; width:160px"&gt;Largest Donation&lt;/td&gt;';
$.each(perCurrency, function(index, value){
  var highest = 0;
  $.each(value, function(k, v){
    if (v &gt; highest) highest = v;
  });
  donation_table += '&lt;td&gt;'+highest+'&lt;/td&gt;';
});

donation_table += '&lt;/tr&gt;&lt;tr&gt;&lt;td colspan="'+numOfCurrency+'"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="font-weight:bold; width:160px"&gt;Total Donation&lt;/td&gt;';
$.each(perCurrency, function(index, value){
  var total = 0;
  $.each(value, function(k, v){
    total = total + v;
  });
  donation_table += '&lt;td&gt;'+total+'&lt;/td&gt;';
});

donation_table += '&lt;/tr&gt;&lt;/table&gt;';

$("#giving_capacity").html(donation_table);


I am trying to put this table in a div with an id #giving_capacity.
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 = $('&lt;table&gt;').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 &lt; lowestInCurrency) lowestInCurrency = v;
    if (v &gt; highestInCurrency) highestInCurrency = v;
  });

  donation_table.append(
    $('&lt;tr&gt;').append(
      $('&lt;td&gt;').css('font-weight', 'bold').css('width', '160px').html('&amp;nbsp;')
    ).append(
      $('&lt;td&gt;').css('width', '150px').text(index)
    )
  ).append(
    $('&lt;tr&gt;').append(
      $('&lt;td&gt;').css('font-weight', 'bold').css('width', '160px').text('Smallest Donation')
    ).append(
      $('&lt;td&gt;').text(lowestInCurrency)
    )
  ).append(
    $('&lt;tr&gt;').append(
      $('&lt;td&gt;').css('font-weight', 'bold').css('width', '160px').text('Largest Donation')
    ).append(
      $('&lt;td&gt;').text(highestInCurrency)
    )
  ).append(
    $('&lt;tr&gt;').append(
      $('&lt;td&gt;').attr('colspan', numOfCurrency).html('&amp;nbsp;')
    )
  ).append(
    $('&lt;tr&gt;').append(
      $('&lt;td&gt;').css('font-weight', 'bold').css('width', '160px').text('Total Donation')
    ).append(
      $('&lt;td&gt;').text(totalInCurrency)
    )
  );
});

$("#giving_capacity").html(donation_table);