Ionic4 show data with ngFor inside an Object which is inside an Object

Ionic Framework
1

Im trying to show some data from Api, but the data I need is inside an object which is inside an object. how do I get it?

Im trying to get “full_url” inside data object, which is inside avatar object. I already tried:

<ion-list>
    <ion-item *ngFor="let user of users.data">
        <ion-label>
            <h2>{{ user.uname }}</h2>
            <p *ngFor="let data of user.avatar.data">{{ data.url }}</p>
        </ion-label>
    </ion-item>
</ion-list>

Here’s the Api Response Structure:

29
292880×968 266 KB

Response I got is:

Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

2

The error means:

You wrote let foo of bar, but bar isn’t something I can loop across. It’s an Object, which needs to be accessed by key instead.

users.data is an array. users.data[0].avatar.data is an object.

<p [innerText]="user.avatar.data.full_url">

1 Like