创建按列分组的矩阵表

我需要列出在特定区域内运行的所有项目。 所有项目都应作为列添加到表中。 项目数量可以增加，因此需要动态创建具有动态列的表。 此外，表格应以两列开头，其中包括有关每个项目应重复的类别和区域的信息。 我们还需要按状态对项目进行分组。 所以我们需要列分组。 我不知道下面的JSON结构是否准确无法满足要求，或者我们是否需要更改它

我有类似的JSON，

[{ "category": "a", "region": "Region 1", projects: [{ "project": "A", "resources" : 2, "status": green }, { "project": "B", "resources" : 2, "status": green }, { "project": "C", "resources" : 2, "status": green }] }, { "category": "b", "region": "Region 2", projects: [{ "project": "F", "resources" : 2, "status": red }, { "project": "A", "resources" : 4, "status": green }] }] 

是否可以动态创建按状态列分组的表。 或者我们应该从服务器端处理这样的表的创建。 该表应该与此类似，

 
 
 
Category
 
Region
 
Green
 
Red
 
 
 
A
 
B
 
C
 
D
 
E
 
F
 
G
 
 
 
A
 
Region 1
 
2
 
2
 
2
 
 
 
 
 
 
 
B
 
Region 2
 
4
 
 
 
 
 
2
 
 
  

我想是否可以使用上面的JSON结构通过jQuery动态实现，或者我们是否需要修改JSON结构。

Answer 1

您可以使用诸如此类的函数在JavaScript中执行此操作

 "use strict"; function groupBy(array, selectKey) { return array.reduce((groups, element) => { const key = selectKey(element); if (groups[key]) { groups[key].push(element); } else { groups[key] = [element]; } return groups; }, {}); } 

这会将一个数组投影到一个对象中，该对象具有从数组中的对象投射的每个不同键的属性。 每个属性的值将是在我们传递的任何selectKey函数下生成该键的值的数组。

注意： selectKey应返回一个字符串或数字，无论如何，其结果将被强制转换为字符串。

现在，根据您的arrays，我们可以对其进行分组。

让我们从按category分组开始：

 "use strict"; function groupBy(array, selectKey) { return array.reduce((groups, element) => { const key = selectKey(element); if (groups[key]) { groups[key].push(element); } else { groups[key] = [element]; } return groups; }, {}); } const xs = [{ "category": "a", "region": "Region 1", projects: [{ "project": "A", "resources": 2, "status": 'green' }, { "project": "B", "resources": 2, "status": 'green' }, { "project": "C", "resources": 2, "status": 'green' }] }, { "category": "b", "region": "Region 2", projects: [{ "project": "F", "resources": 2, "status": 'red' }, { "project": "A", "resources": 4, "status": 'green' }] }]; const byCategory = groupBy(xs, x => x.category); console.log(byCategory);