时间戳

首页 > 解决方案 > 如何使用 Angular 中的 typescript 获取 json 中特定嵌套节点的计数？

json - 如何使用 Angular 中的 typescript 获取 json 中特定嵌套节点的计数？

问题描述

我需要从 JSON 中获取特定嵌套节点的数量。我试图弄清楚但无法获得具体结果，因为它向我显示了所有行下所有适用、不适用的总数，而不是特定的嵌套节点数。

需要您的专业知识来纠正代码以达到预期的结果。

电流输出：

Applicable as 3, Not Applicable as 2

预期输出：我正在显示父行和每行上的单击功能以显示详细信息/整个数据。因此，对于详细信息的第一行，我想要适用：2，不适用：1 第二行单击适用：1，不适用：1

在此处输入图像描述 点击第一行 在此处输入图像描述 点击第二行 在此处输入图像描述

两者都显示总数。相反，它应该只显示第 1 个 2 n 1 和第 2 个 1 n 1。

app.component.ts

getApplicableCounts() {
    this.impactCount = {applicable:0, notapplicable:0, fyi: 0}
    this.allUser.forEach(row => {
      row.assigned_to.forEach(sub => {
        if (sub.sub_impact === 'Applicable') {
          this.impactCount.applicable++;
        } else if (sub.sub_impact === 'Not Applicable') {
           this.impactCount.notapplicable++;
        } else if (sub.sub_impact === 'FYI') {
          this.impactCount.fyi++;
        }
      });
    });
  }

app.component.html

<ul class="">
<li class="">{{impactCount.applicable}}</li>
<li class="">{{impactCount.notapplicable}}</li>
<li class="">{{impactCount.fyi}}</li>
</ul>

数据.json

{
  "users": [
    {
      "id": 1,
      "first_name": "Male",
      "last_name": "Record",
      "email": "male.record@gmail.com",
      "gender": "Male",
      "dob": "01-01-1987",
      "impact": "Not Applicable",
      "score": "Updated",
      "checked": false,
      "assigned_to": [
        {
          "co_score": 54,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 20,
          "dl": "CAT2",
          "sub_impact": "Not Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 99,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
      ]
    },
    {
      "id": 2,
      "first_name": "Female",
      "last_name": "Record",
      "email": "female.record@gmail.com",
      "gender": "Female",
      "dob": "31-12-1987",
      "impact": "Not Applicable",
      "checked": false,
      "score": "Updated",
      "assigned_to": [
        {
          "co_score": 54,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 20,
          "dl": "CAT2",
          "sub_impact": "Not Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
      ]
    }
  ]
}

标签： jsonangulartypescript

解决方案

您可以使用组件中的某个函数的帮助来实现所需的行为，

组件.ts：

getCount(members, filterValue) {
  return members.filter(a => a.sub_impact === filterValue).length;
}

并且 html 如下所示：

<li>Applicable: {{ getCount(userObj.assigned_to, 'Applicable') }}</li>
<li>Not Applicable: {{ getCount(userObj.assigned_to, 'Not Applicable') }}</li>
<li>FYI: {{ getCount(userObj.assigned_to, 'FYI') }}</li>

这是一个带有示例的stackblitz

有更强大的方法可以做到这一点，例如创建管道，这可以使代码更优雅，但这种方法也很好，因为不存在代码重复并且它以清晰、明确的方式按预期工作。

推荐阅读