如何使用 Angular ngFor 按值对 JSON 数据进行分组？

Question

我有以下 JSON:

{
  "data": [
    {
      "workT": "001",
      "workTypeDesc": "Test 1",
      "id": "1",
      "jobNr": "0003",
      "jobDesc": "Header 1",
    },
    {
      "workT": "003",
      "workTypeDesc": "Test 2",
      "id": "2",
      "jobNr": "0002",
      "jobDesc": "Header 2",
    },
    {
      "workT": "001",
      "workTypeDesc": "Test 1",
      "id": "3",
      "jobNr": "0001",
      "jobDesc": "Header 3",
    }
  ],
  "result": null
}

我必须根据 workT 和 workTypeDesc 对这些数据进行分组。也就是说，要根据图像分组显示（和 demo）：

Answer 1

数据可以通过多种方式进行转换，以适合作为您要使用的 UI 组件的来源。一种替代方法是简单地将 data 数组映射到具有一个 attribute/key 的对象，每组数组对应 workT 值。

这样的数据转换与 angular 无关，因为这是标准的 Javascript 数据操作：

grouped = yourJsonData.data.reduce((group, current)=> {
//create your grouping key, by which you want to group the items
const groupingKey = `${current.workT} - ${current.workTypeDesc}`;
//if the group does not yet have an entry for this key, init it to empty array
group[groupingKey] = group[groupingKey] || [];
//add the current item to the group
group[groupingKey].push(current);
return group;
}, {})

这里我们取 data 数组，并使用 js reduce 将其转换为对象，其中键对应于 workT - workTypeDesc 的唯一值，值是项目的数组将 workT 作为值。

然后您可以将此传递给任何 angular 指令以呈现为嵌套元素，例如

<p-accordion>
    <p-accordionTab header="{{group.key}}" *ngFor="let group of grouped | keyvalue">
        <p-accordion>
            <p-accordionTab header="jobNr:{{item.jobNr}} - jobDesc:{{item.jobDesc}}" *ngFor="let item of group.value">
                <pre>{{item | json }}</pre>
            </p-accordionTab>
        </p-accordion>
    </p-accordionTab>

</p-accordion>

这里我们使用 angular 中的 keyvalue 管道，它允许对对象键进行迭代（默认情况下 ngFor 只允许 iterable 作为源）。

Demo on stackblitz

Answer 2

这是一个如何解析它的示例：

// define function that will manage it
var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

let valueToGiveToNgFor = groupBy([
{
  "workT": "001",
  "workTypeDesc": "Test 1",
  "id": "1",
  "jobNr": "0003",
  "jobDesc": "Header 1",
},
{
  "workT": "003",
  "workTypeDesc": "Test 2",
  "id": "2",
  "jobNr": "0002",
  "jobDesc": "Header 2",
},
{
  "workT": "001",
  "workTypeDesc": "Test 1",
  "id": "3",
  "jobNr": "0001",
  "jobDesc": "Header 3",
}], 'workT'); // 'workT' is by you want to groupBy values

  console.log(valueToGiveToNgFor);

如何使用 Angular ngFor 按值对 JSON 数据进行分组？

How to group JSON data by value using Angular ngFor?

angular

typescript

grouping

ngfor