DEMO：

Question

我需要有关使用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]中的第一个位置应为空。任何帮助将不胜感激。

Answer 1

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

{
  "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＆amp; task：getItemBy=function(name,task)

这两个步骤将使你的算法很容易呈现你想要的HTML表格：

DEMO：

var data=[{
  "task": "Test1",
  "number": 20,
  "name": "John"
 }, 
 {
  "task": "Test1",
  "number": 10,
  "name": "Doug"
 }, 
 {
  "task": "Test2",
  "number": 50,
  "name": "John"
 }, 
 {
  "task": "Test2",
  "number": 100,
  "name": "Doug"
}];

 var groupBy=function(arr,key) {
      return arr.reduce(function(rv, x) {
        (rv[x[key]] = rv[x[key]] || []).push(x);
        return rv;
      }, {});
};
 //------
var groupedByName=groupBy(data,'name');

var getItemBy=function(name,task){
    return groupedByName[name].filter((item)=>item.task===task)
 };

//------


//--
console.log(`***** Item where name=John & task=Test1`,
   getItemBy('John','Test1')
)
console.log(`****** All data after grouping`,
    groupedByName
)

在电子表格中显示json数据，如使用angular查看html表

1 个答案:

DEMO：