Iterate through JSON array in ionic displaying all data

Question

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');
  }

Please show the response console.log(this.patients)

Adrita Sharma
– Adrita Sharma

2019-06-18 10:12:57 +00:00
Commented Jun 18, 2019 at 10:12 — Adrita Sharma
– Adrita Sharma, Commented Jun 18, 2019 at 10:12
Link for image i.sstatic.net/ZSuU5.png

c-mac
– c-mac

2019-06-18 10:18:27 +00:00
Commented Jun 18, 2019 at 10:18 — c-mac
– c-mac, Commented Jun 18, 2019 at 10:18

Ankit Prajapati · Accepted Answer · 2019-06-18 10:24:10Z

2

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>

answered Jun 18, 2019 at 10:24

Ankit Prajapati

2,8303 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

c-mac Over a year ago

Thanks very much it works! Any idea why in VSC it displays --- Property 'patients' does not exist on type 'Object'.

Ankit Prajapati Over a year ago

Can you show the viewPatient() method call ?, might you are returning type as Object or any instead of specific response type. also for patients array you can create user-defined type using interface.

Muhammed Albarmavi Over a year ago

👍 totally agree with @Ankit solution but as another option we can use async pipe

Adrita Sharma · Accepted Answer · 2019-06-18 10:22:37Z

1

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>

edited Jun 18, 2019 at 10:22

answered Jun 18, 2019 at 10:20

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

3 Comments

c-mac Over a year ago

Getting an error of 'Cannot read property 'data' of undefined'

Adrita Sharma Over a year ago

Edited, add ? You got that error as it took some time to load the patients data

Ankit Prajapati Over a year ago

@c-mac, I have added this answer before this edited, is there any specific reason for marking this as right, and not that, because as you told my solution is worked for you.

Collectives™ on Stack Overflow

Iterate through JSON array in ionic displaying all data

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related