javascript在表中显示数组结果

Question

我有以下JavaScript循环，可将搜索表单的结果输出到表中

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);
} 

像这样

我需要编辑它，所以我有一个像这样的表格视图

其中<th>在域名结果之前显示域名

我有一个包含要搜索的域的变量，我的数组包含一个包含域的键值

谁能指出我正确的方向？

我目前的想法是，我需要将搜索变量插入到我的循环中，并在每个循环后检查域是否未更改

任何帮助都会很棒

Answer 1

使用所拥有的数据，创建一个数据结构，该数据结构将在实际构建表之前帮助您构建表。

假设我们有以下数据

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
}];

让我们对其进行转换，使其看起来像

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
    }]
};

我们还需要另一个变量domains （数组）来存储和排序域。 在JavaScript中， 不能保证属性的顺序 ，因此在对象上进行迭代不是一个好主意。 相反，我们将使用domains来确保顺序。

 $(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> 

Answer 2

您应该有一个域名变量。

确保输入的所有数据均按域顺序排列，否则请按字母顺序将域结尾。

接下来，您将执行if语句，如果该条目的域等于上一个条目，则使用新域插入行。 然后插入新条目。

并将域名变量更新为上一个条目的域。 因此它将遍历所有值，并根据需要添加适当的标头。