angular/ts/json: from total records how to know the count of matching the specific values

*爱你&永不变心* 提交于 2021-01-29 05:23:17

问题


From the below data how to get the count of applicable impact, not applicable impact n FYI impact for assigned_to nested record instead of parent.

So, the expected results will be:

For 1st Record
    Applicable:2 Not Applicable: 1
For 2nd Record
    Applicable:1 Not Applicable: 1

db.json

[
  {
    "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."
      }
    ]
  },
  {
    "id": 3,
    "first_name": "Male",
    "last_name": "Record Another",
    "email": "male.recordanother@gmail.com",
    "gender": "Male",
    "dob": "31-10-2017",
    "impact": "Not Applicable",
    "checked": false,
    "score": 25,
    "assigned_to": [
      {
        "co_score": 100,
        "dl": "CAT3",
        "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": 2,
        "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."
      }
    ]
  },
  {
    "first_name": "Male",
    "last_name": "One More Record",
    "email": "male.onemorerecord@gmail.com",
    "gender": "Male",
    "dob": "08-08-1984",
    "impact": "Applicable",
    "id": 6,
    "checked": false,
    "score": 67,
    "assigned_to": [
      {
        "co_score": 4,
        "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": 85,
        "dl": "CAT3",
        "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."
      }
    ]
  },
  {
    "first_name": "Female",
    "last_name": "Another Record",
    "email": "female.anotherrecord@gmail.com",
    "gender": "Female",
    "dob": "2000-07-15",
    "impact": "Applicable",
    "id": 7,
    "checked": false,
    "score": 85,
    "assigned_to": [
      {
        "co_score": 34,
        "dl": "CAT3",
        "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": 55,
        "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."
      }
    ]
  },
  {
    "id": 8,
    "first_name": "New",
    "last_name": "Record",
    "email": "new.record@gmail.com",
    "gender": "Male",
    "dob": "2020-12-17",
    "impact": "Not Applicable",
    "score": 60,
    "assigned_to": [
      {
        "co_score": 94,
        "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": 85,
        "dl": "CAT3",
        "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."
      }
    ]
  }
]

app.component.ts

getApplicableCounts() {
this.impactCount = {applicable:0, notapplicable:0, fyi: 0}
this.allUser.forEach(row => {
  row.assigned_to.forEach(sub => {
    console.log(sub.sub_impact)
    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++;
    }
  });
});
getLatestUser() {
    this.commonService.getAllUser().subscribe((response) => {
      this.allUser = response;
      this.totalRecords = this.allUser.length;
      console.log(this.totalRecords);
    })
  }
ngOnInit() {
    this.getLatestUser();
  }

What should I write in my getLatestUser function to display the count of applicable: , not applicable: , n fyi:


回答1:


This was solved in this question when I was solving a different problem. To get the counts of the impact you need to add the following variable and function:

impactCount = {
   applicable: 0,
   notApplicable: 0,
   fyi: 0
};

getImpactCounts() {
  this.impactCount = {applicable: 0, notApplicable: 0, fyi: 0};

  this.allUser.forEach(row => {
    if (row.impact === 'Applicable') {
      this.impactCount.applicable++;
    } else if (row.impact === 'Not Applicable') {
      this.impactCount.notApplicable++;
    } else if (row.impact === 'FYI') {
      this.impactCount.fyi++;
    }
  });
}

and then add it to the html as such

<div>
  Applicable: {{impactCount.applicable}}
  Not Applicable: {{impactCount.notApplicable}}
  FYI: {{impactCount.fyi}}
</div>

and then all you need to do is call getApplicableCounts() from your getLatestUser() function and any time data changes (so pretty much ever crud call). Here is a working stackblitz that is also linked in the comment section of the other question.



来源:https://stackoverflow.com/questions/65217548/angular-ts-json-from-total-records-how-to-know-the-count-of-matching-the-specif

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!