Javascript 使用angular在类似于电子表格的html表格中显示json数据

我需要有关使用angular在html表中呈现此JSON数据的帮助：

[{
  "task": "Test1",
  "number": 20,
  "name": "John"
 }, 
 {
  "task": "Test1",
  "number": 10,
  "name": "Doug"
 }, 
 {
  "task": "Test2",
  "number": 50,
  "name": "John"
 }, 
 {
  "task": "Test2",
  "number": 100,
  "name": "Doug"
}]

我呈现的html表应该如下所示

            Test1      Test2
John        20          50
Doug        10          100

---

无论如何，值需要按分组，然后呈现，但要保持匹配数据。此外，数组[0][0]中的第一个位置应为空。任何帮助都将不胜感激。

因此您可以按名称对数据进行分组，并具有如下数组对象：

{
  "John": [
    {
      "task": "Test1",
      "number": 20,
      "name": "John"
    },
    {
      "task": "Test2",
      "number": 50,
      "name": "John"
    }
  ],
  "Doug": [
    {
      "task": "Test1",
      "number": 10,
      "name": "Doug"
    },
    {
      "task": "Test2",
      "number": 100,
      "name": "Doug"
    }
  ]
}

然后，定义一个函数，通过

name

和

task

检索数据：

getItemBy=function（name，task）

• 这两个步骤将使您的algo易于按照您的需要呈现HTML表：

演示：

var数据=[{
“任务”：“Test1”，
“数字”：20，
“姓名”：“约翰”
}, 
{
“任务”：“Test1”，
“数字”：10，
“姓名”：“道格”
}, 
{
“任务”：“Test2”，
“数字”：50，
“姓名”：“约翰”
}, 
{
“任务”：“Test2”，
“数字”：100，
“姓名”：“道格”
}];
var groupBy=函数（arr，键）{
返回arr.reduce（功能（rv，x）{
（rv[x[键]]=rv[x[键]| |[]）。按（x）；
返回rv；
}, {});
};
//------
var groupedByName=groupBy（数据，'name'）；
var getItemBy=函数（名称、任务）{
返回groupedByName[name]。筛选器（（项）=>item.task==task）
};
//------
//--
console.log（`****项，其中name=John&task=Test1`，
getItemBy（'John'，'Test1'）
)
console.log（`******分组后的所有数据`，
groupedByName
)

它不是有效的JSON格式。。对不起。更正了使用reduce函数时令人感兴趣的问题。我喜欢。但是，我仍然不明白我应该如何迭代groupedByName对象（它不是数组），以便在ng repeat循环中使用该数据。您可以通过以下方式循环对象属性：

object.keys（groupedByName）

查看此内容并告诉我是否有用。实际上，在angular中类似的方法是ng repeat=“（键，值）in groupedByDay”。然而，我仍然在为如何获得正确的html输出而挣扎。我有一种感觉，我需要进行额外的分组或提取标题（在本例中，Test1、Test2可能通过创建标题集合），以便能够迭代并填充此电子表格表。我能够对左侧列使用groupByName，对标题使用groupByTask来实现它。然后我用groupedByName中的ng repeat=“（key，value）”遍历了集合，并相应地填充了值。我不确定这是否有效，但它现在运行良好。无论如何，如果没有您的帮助，这是不可能的。非常感谢