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>

希望对您有所帮助!