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

【问题标题】：How to group JSON data by value using Angular ngFor?如何使用 Angular ngFor 按值对 JSON 数据进行分组？
【发布时间】：2021-09-02 09:12:26
【问题描述】：

我有以下 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）分组显示：

【问题讨论】：

您可以迭代所有元素并将它们添加到包含工作对象列表的地图中
请你实现一些东西，我不清楚。谢谢
我会尝试做点什么

标签： angular typescript grouping ngfor

【解决方案1】：

可以通过多种方式转换数据，以适合作为您想要使用的 UI 组件的来源。一种替代方法是简单地将data 数组映射到一个对象，该对象具有对应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 作为值的项目数组。

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

<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 只允许作为源迭代）。

Demo on stackblitz

【讨论】：

【解决方案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);

【讨论】：