Group and Display list of data from a JSON file in Ionic App

Issue

I am trying to group a list of data based on a key-value pair (Designation = Doc). Local JSON data using Ionic Angular. My files are as below.

Can you please suggest where I am going wrong?

My JSON File is as below:

[
  {
      "Name": "John",
      "Age": "20",
      "Address":"AB",
      "Designation": "Doc"
  },
  {
      "Name": "Rob",
      "Age": "21",
      "Address":"CD",
      "Designation": "Doc"
  },
  {
      "Name": "Bob",
      "Age": "28",
      "Address":"CD",
      "Designation": "Architect"
  },
  {
      "Name": "James",
      "Age": "22",
      "Address":"CD",
      "Designation": "Architect"
  },
  {
      "Name": "Mark",
      "Age": "41",
      "Address":"CD",
      "Designation": "Engineer"
  },
  {
      "Name": "Thames",
      "Age": "31",
      "Address":"CD",
      "Designation": "Architect"
  }
]

My script in ts file is as below:

private readonly URL = 'assets/data/week.json';
this.httpClient.get(this.URL)
      .subscribe((res: any) => {
        this.items = res;
      },
        error=>{
          console.log(error);// Error getting the data
         } );

My html file is as below:

<ion-list *ngFor="let item of items" (click)="itemTapped($event, item)" >
    <ion-item>
      <ion-avatar item-start >
        <img  src="{{item.icon}}"> 
      </ion-avatar>
    </ion-item>
</ion-list>

Solution

I have solved the queries with below solution.

<ion-list>
<ng-container *ngFor="let item of items">
<ion-item *ngIf="item.Designation == 'Architect'" (click)="itemTapped($event, item)" >
    <ion-item>
      <ion-avatar item-start >
        <img  src="{{item.icon}}"> 
      </ion-avatar>
    </ion-item>
</ion-list>

Answered By - Bongaigaon Gapps