我如何使用Angular中的打字稿获取JSON中特定嵌套节点的数量? [英] How can I get the count of specific nested node in json using typescript in angular?

问题描述

我需要从JSON获取特定嵌套节点的数量.我试图找出原因，但无法获得特定结果，因为它向我显示了所有行下所有适用的，不适用的总数，而不是特定的嵌套节点数.

I need to get the count of specific nested nodes from the JSON. I am trying to figure it out but unable to get the specific result as it's showing me the total count of all Applicable, Not Applicable under all rows instead of specific nested node count.

需要您的专业知识来纠正代码以获得所需的结果.

Required your expertise to rectify the code to achieve the desired result.

当前输出:

Applicable as 3, Not Applicable as 2

预期输出: 我正在显示父行，并在每行上显示一个单击功能以显示详细信息/整个数据.所以，对于第一行的详细信息，我想 适用:2，不适用:1 第二行点击 适用:1，不适用:1

Expected Output: I am displaying the parent rows and a click function on each row to display the details/entire data. So, for the first row in details, I want Applicable: 2, Not Applicable: 1 2nd Row click Applicable: 1, Not Applicable: 1

点击第一行 点击第二行

clicking on 1st row clicking on 2nd row

均显示总计数.而是应该只显示1st 2 n 1和仅显示2nd 1 n 1.

for both showing the total count. rather it should show for 1st only 2 n 1 and for 2nd only 1 n 1.

app.component.ts

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

app.component.html

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

data.json

data.json

{
  "users": [
    {
      "id": 1,
      "first_name": "Male",
      "last_name": "Record",
      "email": "[e-mail]",
      "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": "[e-mail]",
      "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."
        }
      ]
    }
  ]
}

推荐答案

您可以在组件中使用功能的帮助来实现所需的行为，

You can use the help of a function in the component to achieve the desired behavior,

component.ts:

component.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 以示例

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

There are more robust ways of doing this, like creating a pipe, which can make the code more elegant, but this method is also fine, since no code duplication exists and it works as intended in a clear, explicit way.

这篇关于我如何使用Angular中的打字稿获取JSON中特定嵌套节点的数量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！