How to find perticular object in the .html page?

data = {
    "zipCode": "40000",
    "county": "Srilanka",
    "state": "Northen",
    "specilityData": [
        {
            "specialty": "North",
            "specialtyCount": 1,
            "specialtyRepresentation": 9411
        },
        {
            "specialty": "South",
            "specialtyCount": 4,
            "specialtyRepresentation": 3323
        },
        {
            "specialty": "East",
            "specialtyCount": 1,
            "specialtyRepresentation": 0
        },
        ............................
        ............................
    ]
}

The data displayed in the .html file and we needed that particular "specilityData" details. How is it possible to get that data in .html?

<span > {{data?.specilityData.find(({ specialty }) => specialty === "North")?.specialtyCount}} </span>

This code throw the error in .html file. Do you have any idea?

CodePudding user response：

If I understand you correctly, there's multiple options. Here's a couple examples of ways using like a method or *ngFor you can play with in a StackBlitz but the gist is either like for example with a method;

getSpecialty = (spec: string):any =>
    this.data?.specilityData.find(({ specialty }) => specialty === spec)
      ?.specialtyCount;

and in the HTML with binding;

{{ getSpecialty('North') }}

Or with *ngFor;

<span  *ngFor="let data of data.specilityData">
  <ng-container *ngIf="data.specialty === 'North'">
    <!-- {{data.specialty}}<br> -->
    {{ data.specialtyCount }}<br />
    <!-- {{data.specialtyRepresentation}} -->
  </ng-container>
</span>

Or other ways depending what you're really trying to do, hope this helps and welcome to SO.