javascript displaying array results in a table

Question

I have the following JavaScript loop that outputs the results of a search form to a table

l = data.length;
for (var i=0; i < l; i++) {
    var row = $('<tr><td>' + data[i].email_address + '</td><td>' 
    + data[i].number_of_orders + '</td><td>' 
    + '£' + data[i].total_order_value + '</td></tr>');
    $('#Reports').append(row);
}

like this

I need to edit this so I have a table view like this

with a <th> showing the domain name before the results of that domain

I have a variable containing the domain searched for and my array contains a key value containing the domain

can anyone point me in the right direction?

my current thinking is that I need to insert the search var into my loop and check after each loop that the domain has not changed

any help would be great

Mikey · Accepted Answer · 2017-06-18T20:03:52.140

Using the data that you have, create a data structure that will help you build the table BEFORE actually building the table.

Suppose we have the following data

var data = [{
    email_address: 'someone@able.com',
    number_of_ordrs: 4,
    total_order_value: 5.56
}, {
    email_address: 'someone.else@bodge.com',
    number_of_orders: 3,
    total_order_value: 8.97
}, {
    email_address: 'another@able.com',
    number_of_orders: 6,
    total_order_value: 0.93
}, {
    email_address: 'someone@bodge.com',
    number_of_orders: 6,
    total_order_value: 0.93
}];

Let's transform it so that it looks like

var newData: {
    'able.com': [{
        email_address: 'someone@able.com',
        number_of_orders: 4,
        total_order_value: 5.56
    }, {
        email_address: 'another@able.com',
        number_of_orders: 6,
        total_order_value: 0.93
    }],
    'bodge.com': [{
        email_address: 'someone.else@bodge.com',
        number_of_orders: 3,
        total_order_value: 8.97
    }, {
        email_address: 'someone@bodge.com',
        number_of_orders: 6,
        total_order_value: 0.93
    }]
};

We'll also need another variable domains, an array, to store and sort the domains. In JavaScript, the order of the properties is not guaranteed, so iterating over the object would not be a good idea. Instead, we'll use domains to ensure the order.

$(function() {
  var data = [{
    email_address: 'someone@able.com',
    number_of_orders: 4,
    total_order_value: 5.56
  }, {
    email_address: 'someone.else@bodge.com',
    number_of_orders: 3,
    total_order_value: 8.97
  }, {
    email_address: 'another@able.com',
    number_of_orders: 6,
    total_order_value: 0.93
  }, {
    email_address: 'someone@bodge.com',
    number_of_orders: 6,
    total_order_value: 0.93
  }];

  var newData = {};

  data.forEach(function(d) {
    var domain = d.email_address.split('@')[1];
    // is this a new domain?
    if (!newData.hasOwnProperty(domain)) {
      newData[domain] = [];
    }
    // add entry
    newData[domain].push(d);
  });
  
  // get and sort domains alphabetically
  var domains = Object.keys(newData).sort();
  
  //console.log(domains, newData);
  
  // build table
  var html = '<table>';
  domains.forEach(function(domain) {
    html += '<tr><td colspan="3">' + domain + '</td></tr>';
    
    newData[domain].forEach(function(entry) {
      html += '<tr>';
      html += '<td>' + entry.email_address + '</td>';
      html += '<td>' + entry.number_of_orders + '</td>';
      html += '<td>' + entry.total_order_value + '</td>';
      html += '</tr>';
    });
    
  });
  html += '</table>';
  
  $('#Reports').html(html);
});

table {
  border: 1px solid #000;
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="Reports"></div>

Wow, thanks for providing such detailed codes. This helps me sorting out my multiple categories that I wanted to display, literally took me a 5 DAYS on research, because I didn't know how to remove duplicate property within a loop form then display them afterwards. CHEERS! — DagicCross, Jun 08 '18 at 00:32

score 0 · Answer 2 · answered Jun 18 '17 at 19:29

You should have a variable with domain name.

Make sure all the data entered are are in order of the domain, if not you should alphabetize it by ending domain.

Next you would do an if statement, If the domain of this entry is equal to previous entry, else insert row with new domain. Then insert new entry.

And update the domain name variable to the domain of the previous entry. So it will loop through al the values, adding appropriate headers as necessary.

javascript displaying array results in a table

2 Answers2