Iterate through JSON array in ionic displaying all data

user_11568235 0
Viewed 255

1- Image link for result of JSON data

I have JSON data in an array and I can display an individual part of the array in my HTML code. However, i am unable to display things like display all of names in the full array (for eg I can only access array[0])

ts file

patients: any[] = [];

this.viewService.viewPatient().subscribe(res => {
      this.patients = [res];
      console.log('data');
      console.log(res);
    });

html file

 // This works
 <ion-item *ngFor="let patient of patients">
       Name: {{patient.patients.data[0].FirstName}}
 </ion-item>

 // Doesnt work
 <ion-item *ngFor="let patient of patients"> (1) 
        Name: {{patient.patients.data.FirstName}}
 </ion-item>

viewpatient()

viewPatient() {
    return this.http.get(apiUrl + 'viewPatient.php');
  }
ionic-framework angular json
2 Answers

In viewPatient() api assign res.patients.data directly to this.patients

this.viewService.viewPatient().subscribe(res => {
      this.patients = res.patients.data;
      console.log('data');
      console.log(res);
    });

then on template use as below 

<ion-item *ngFor="let patient of patients">
       Name: {{patient.FirstName}}
 </ion-item>
user_93809440

Try like this:

<ion-item *ngFor="let patient of patients?.patients?.data">
       Name: {{patient.FirstName}}
</ion-item>

or you can assign data array directly in patients

TS:

patients: any[] = [];

this.viewService.viewPatient().subscribe(res => {
     this.patients = res.patients.data;
});

Template:

<ion-item *ngFor="let patient of patients">
       Name: {{patient.FirstName}}
</ion-item>
user_76031090
Related