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語句，如果該條目的域等於上一個條目，則使用新域插入行。 然后插入新條目。

並將域名變量更新為上一個條目的域。 因此它將遍歷所有值，並根據需要添加適當的標頭。