current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 3 down vote favorite

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.

share|improve this question

migrated from stackoverflow.com Jun 24 at 12:51

This question came from our site for professional and enthusiast programmers.
    
i dont think condensing everything to one loop will make things run that much faster - looks like what you are doing is good. –  ewizard Jun 23 at 14:52
    
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 –  guest271314 Jul 6 at 18:26
add comment

1 Answer

up vote 1 down vote

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);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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