3
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ i dont think condensing everything to one loop will make things run that much faster - looks like what you are doing is good. \$\endgroup\$ – ewizard Jun 23 '14 at 14:52
  • \$\begingroup\$ 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 \$\endgroup\$ – guest271314 Jul 6 '14 at 18:26
1
\$\begingroup\$

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);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.