我正在构建Angular 7应用程序。 在这个应用程序中,我正在从服务器中提取JSON数据,然后再按特定的密钥进行分组。 我设法做到了,但后来我不再拥有数组,而是拥有某种对象。

启动JSON数据

[{
    "id": 67,
    "survey_id": 26,
    "question_id": 63,
    "user_id": 35,
    "privacy": null,
    "score": null,
    "comment": "A nice little comment",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 35,
        "fullname": "Michael Palin"
    },
    "can_manage": true
},
{
    "id": 68,
    "survey_id": 26,
    "question_id": 64,
    "user_id": 4,
    "privacy": null,
    "score": null,
    "comment": "Another little comment",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 69,
    "survey_id": 26,
    "question_id": 65,
    "user_id": 4,
    "privacy": null,
    "score": null,
    "comment": "Some more comments",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 70,
    "survey_id": 26,
    "question_id": 66,
    "user_id": 4,
    "privacy": null,
    "score": 5,
    "comment": null,
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
}

]

这是我的分组代码

setupStats() {
    const groupBy = (array, key) => {
      return array.reduce((result, currentValue) => {
        (result[currentValue[key]] = result[currentValue[key]] || []).push(
          currentValue
        );
        return result;
      }, {});
    };
    const grouped = groupBy(this.collection, 'user_id');
    console.log(grouped);
  }

这是输出

{4: Array(3), 35: Array(1)}

4和35是user_id。 我希望它们得到数组的一部分,以便可以循环它们,而现在无法执行。

#1楼 票数:1

您可以使用一个简单的循环来进行此分组,如下所示:

 const arr = [{ "id": 67, "survey_id": 26, "comment": "A nice little comment", "user": { "id": 35, "fullname": "Michael Palin" }, "can_manage": true }, { "id": 68, "survey_id": 26, "user": { "id": 4, "fullname": "Roland Smacker" }, "can_manage": true }, { "id": 69, "survey_id": 26, "user": { "id": 4, "fullname": "Roland Smacker" }, "can_manage": true }, { "id": 70, "survey_id": 26, "user": { "id": 4, "fullname": "Roland Smacker" }, "can_manage": true }]; const map = {}; for(const item of arr) { const id = item.user.id; if(!map[id]) { map[id] = []; } map[id].push(item); } // Access specific group by id. // console.log(map['4']); // Loops over all the groups. for(const [id, groupArr] of Object.entries(map)) { console.log('id: ' + id); console.log('associated array: ', groupArr); } 

#2楼 票数:1 已采纳

如果你正在寻找您的分组数据绑定到与模板*ngFor指令,你可以利用keyvalue管遍历您的分组对象:

<div *ngFor="let group of groupedItems | keyvalue">
  <strong>{{ group.key }} {{ group.value.length }} items</strong>
  <div *ngFor="let item of group.value">
    {{item.id}} {{item.comment}}
  </div>
</div>

您可以在此处了解有关键值管道的信息

  ask by Mark Denn translate from so

未解决问题?本站智能推荐:

1回复

按数组分组

我有一个 JSON 文件,我希望根据其中的三个字段对这个 JSON 进行分组。 JSON 如下所示(当然还有更多项目): 请求的结果(使用underscore或lodash )是: [ { "Racename" : "10KM", "Category": "34", "Gender": "
2回复

将数组分配给另一个数组时出现角度未定义错误

所以在这个组件中,我从父组件获取一个对象数组,我用它来显示一个对象列表,但是当我创建一个新数组,并将第一个数组分配给它并尝试使用它时,我得到新数组未定义的错误,这是我的代码: 请知道如何创建新数组,谢谢。
2回复

按ID分组并根据分组的数据创建一个数组

在我的有角度的应用程序中,我得到如下响应。 [{ "proposalId": "cc0bcd90-fc75-4c73-bd66-799b37330fb5", "proposalGpId": "cc0bcd90-fc75-4c73-bd66-799b37380fb5", "eve
1回复

将两个数组中的元素分组到另一个数组的一个元素中[关闭]

关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其仅通过编辑这篇文章来
2回复

根据TypeScript中的条件将数据从一个数组推送到另一个数组[关闭]

关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其仅通过编辑这篇文章来
1回复

如何使用angular8使数据列表从一个数组移动到另一个数组

我有 2 组数组,一Group在Group ,另一Not in group List Not in group 。 我有 2 个按钮, move to right and move to left ,因此单击它们时,所选数据必须根据我们选择的按钮向右或向左移动。 这里还应该实现列表中数据的多选。 我
2回复

将数组过滤为另一个数组

解释我的情况我想过滤我对我的 API 的响应,它返回一个数组来提出这个问题 我接受了这些测试数据此 prodPrueba 模拟用户选择的产品和变体 id 是所选产品的代码,变体是用户为产品选择的变体,例如……鞋子是产品,尺寸 18 是变体 B801278-18 这是我后端的回应 正如您在对象“pr
1回复

使用Lodash将Javascript数组分组

Transaction.ts 类别.ts 我有一个Transaction数组,如下所示。 现在,我需要对数据进行分组,如下所示。 我试图用lodash将其分组 。 但是无法格式化我需要的方式(如上所示)。 我可以在这里得到任何支持吗? 这就是我尝试过的。 它只是返回