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

像这样

我需要编辑它，以便我有一个像这样的表格 View

带有 <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 中，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>