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
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.