在 HTML 中呈现按特定属性分组的表格

【问题标题】：Render a table, grouped by a specific attribute, in HTML在 HTML 中呈现按特定属性分组的表格
【发布时间】：2017-11-06 22:29:39
【问题描述】：

我正在尝试找出一种算法来将此数据结构呈现为 HTML 表，并按给定属性分组：

[
  { name: 'apple', color: 'red', type: 'fruit' },
  { name: 'tomato', color: 'red', type: 'veggie' },
  { name: 'banana', color: 'yellow', type: 'fruit' },  
]

<table border=1>
<tr>
  <td>banana</td>
  <td rowspan=2>fruit</td>
  <td rowspan=1>yellow</td>
</tr>
<tr><td>apple</td><td rowspan=2>red</td></tr>
<tr><td>tomato</td><td>veggie</td></tr>
</table>

我觉得这是一个算法问题，但我无法确定在这种情况下哪种算法有效。

【问题讨论】：

标签： javascript html algorithm grouping

【解决方案1】：

您可以使用一个函数来为您希望每一行的外观生成一个模板。从那里，您可以使用Array.sort() 方法按类型（或您选择的任何一种）对它们进行排序。

let foods = [
  { name: 'apple', color: 'red', type: 'fruit' },
  { name: 'tomato', color: 'red', type: 'veggie' },
  { name: 'banana', color: 'yellow', type: 'fruit' },  
];

function addRow(food) {
	return `<tr><td>${food.name}</td><td rowspan=2>${food.color}</td><td rowspan=1>${food.type}</td></tr>`;
}

let sortedFoods = foods.sort((a, b) =>(a.type < b.type) ? -1 : 1);
console.log(sortedFoods);
foods.forEach(food => document.querySelector('.foods').innerHTML += addRow(food));

<table class="foods">

</table>

希望这会有所帮助！

JSFiddle

【讨论】：