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语句，如果此条目的域等于上一个条目，则插入具有新域的行。然后插入新条目。

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

javascript显示数组结果在表中

2 个答案: