(IONIC - Angular) How can i show in html cards, only certain objects from a JSON that match certain criteria?

Question

Im a noob in ionic/angular, and im trying to retrieve some data from a JSON, and show it in the HTML through cards ()

The JSON contains a lot of objects that are either "deTurno == true" or "deTurno == false"

so far i have this:

public data: any;
public test: any;
public testTwo: any;

constructor(private apiService: ApiService) {
  this.apiService.getFarmacias().subscribe(
      (data) => {
        this.data = data;
        
        for (const item of this.data) {
          if (item.deTurno == true) {
            
             // copy the item inside this.test

          } else {
             
             // copy the item inside this.testTwo

          }

        } 

      }
  );
}

what i want is to get every item inside the JSON that matches "deTurno == true", and put them inside test, so then i can use test to show those items in the HTML, like this:

<ion-card *ngFor="let dataItem of test">
    <ion-card-header>
        <ion-card-subtitle>{{dataItem.direccion}}</ion-card-subtitle>
        <ion-card-title>{{dataItem.nombre}} (De turno hoy)</ion-card-title>
        <h5>Localidad: {{dataItem.localidad}}</h5>
        <h4>{{dataItem.telefono1}}</h4>
    </ion-card-header>
</ion-card>

I need to ONLY show those items that match "deTurno == true", and then do some stuff with the items that match "deTurno == false", otherwise i would show just every item from "data"

Please help:(

Answer 1

Your issue here is

public test: any;

You are not defining test, so you when you tried to push to it, its undefined.

public data: any[] = [];
public test: any[] = [];
public testTwo: any[] = [];

constructor(private apiService: ApiService) {
  this.apiService.getFarmacias().subscribe(
      (data) => {
        this.data = data;
        
        for (const item of this.data) {
          if (item.deTurno == true) {
            
             // copy the item inside this.test
             this.test.push(item);

          } else {
             
             // copy the item inside this.testTwo
             this.testTwo.push(item);


          }

        } 

      }
  );
}