javascript - 具有唯一名称标题的表

Question

我有一系列项目，大致如下:

[
    {name: "john", task: "dig"},
    {name: "john", task: "swim"},
    {name: "john", task: "eat"},
    {name: "paul", task: "dig"},
]

我想创建一个表，以便标题具有名称，然后是下面的任务，例如

john       paul
dig        dig
swim
eat

所以这里有人好心地告诉我有关reduce 函数的信息，但是我在以上述方式显示它时仍然遇到问题。

一旦我应用了reduce函数，我就迷失了，所以说:

var result = arr.reduce(function(table, element)
{
    if(!table[element.name])
    {
        table[element.name] = [];
    }
    table[element.name].push(element.task);
    return table;
}, {});
// For demo:
document.write(JSON.stringify(result));

如何使表格看起来像上面我想要的那样？

Answer 1

他们给了你一个很好的解决方案，我也认为 Array.prototype.reduce() 是最干净的方法。

现在您已经组织好了数据，让我们开始设计样式。

我们将迭代该对象来查找不同的(本例中为两个)属性。对于每个元素，我们将创建一个 div 和 ul 元素。

然后我们将迭代属性的值(一个数组)并创建一个li元素对于每一个。

最后一步，我们将使 div 元素设置为 float: left; 以保持它们并行。

当然，您也可以使用table元素。

var arr = [
    {name: 'john', task: 'dig'},
    {name: 'john', task: 'swim'},
    {name: 'john', task: 'eat'},
    {name: 'paul', task: 'dig'},
];
  
var result = arr.reduce(function(table, element) {
    if(!table[element.name]) { table[element.name] = []; }
    table[element.name].push(element.task);
    return table;
}, {});

$('body').append('<p>My data: ' + JSON.stringify(result) + '<p><hr>');

for (var key in result) {
  var html = '<div>' + key + '<ul>';
  for (var i = 0; i < result[key].length; i++) {
    html += '<li>' + result[key][i] + '</li>';
  }
  $('body').append(html + '</ul></div>');
}

div {
  float: left;
  width: 100px;
}
ul {
  list-style-type: none;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望对你有帮助!