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>表明域

我有一個包含域搜索和我的數組包含包含域的一個關鍵值的變量的結果之前，域名

任何人都可以點我在正確的方向？

我目前的想法是，我需要插入搜索VAR到我的循環，並且每個循環的域並沒有改變

後檢查任何幫助將是巨大

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中，order of the properties is not guaranteed，因此迭代對象不是一個好主意。相反，我們將使用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語句，如果此條目的域等於上一個條目，則插入具有新域的行。然後插入新條目。

並將域名變量更新爲上一個條目的域。所以它會遍歷所有值，根據需要添加適當的頭文件。