How to display nested objects and or arrays in angular 2

Question

I am getting json data from the back-end(api). And i want to display this with ngFor. I got an error message like: "Cannot find a differ supporting object '[object Object]'" from the console.

later I tried this:

@Pipe({
    name: 'mapToIterable'
})
export class MapToIterable implements PipeTransform{
    transform(map: {}, args: any[] = null): any {
        if (!map)
            return null;
        return Object.keys(map)
            .map((key) => ({ 'key': key, 'value': map[key] }));
    }
}

and then in my view:

 <li *ngFor="let detail of getEventDetails | mapToIterable">
            Creator Email: {{detail.creator.email}}
     </li>

this time i didn't get an error but there is no display values of {{detail.creator.email}}

Data from back-end

 {
        "banner_image": null, 
        "categories": [], 
        "creator": {
            "email": "[email protected]", 
            "first_name": "Prince", 
            "gender": true, 
            "id": 15, 
            "last_name": "Odame", 
            "subscribed_categories": [], 
            "watchlist": []
        }, 
        "creator_id": 15, 
        "description": "Learn how to install solar panels in 3 days and make real money all your lifetime", 
        "faqs": [], 
        "id": 6, 
        "is_verified": true, 
        "max_tickets_per_user": 1, 
        "shows": [
            {
                "address": "Engineering Auditorium, College of Engineering, KNUST, Kumasi", 
                "city": "Kumasi", 
                "country": "Ghana", 
                "end_time": "2016-08-03T14:30:00+00:00", 
                "event_id": 6, 
                "id": 5, 
                "is_online": false, 
                "start_time": "2016-08-01T08:30:00+00:00", 
                "state": "Ashanti", 
                "ticket_types": [], 
                "venue": "Engineering Auditorium"
            }
        ], 
        "tags": [], 
        "title": "Solar Panels Installation Workshop"
    }

Thanks in advance

This won't work like that. Read the code of the pipe - you now have key/value objects in an array. Check this plunker: plnkr.co/edit/wuVNDpVErNNiXlAn8GJk?p=preview — Maximilian Riegler
– Maximilian Riegler, Commented Jul 12, 2016 at 7:56
Thanks @rinukkusu it works for me but is there a way to values of the sub arrays — adongo
– adongo, Commented Jul 12, 2016 at 8:19
Not with *ngFor. Without it you can just use {{getEventDetails.creator.email}}. — Maximilian Riegler
– Maximilian Riegler, Commented Jul 12, 2016 at 8:38

Maximilian Riegler · Accepted Answer · 2016-07-12 08:45:38Z

5

You probably just want to do this:

<li>Creator Email: {{getEventDetails.creator.email}}</li>

And for the arrays:

<li *ngFor="let show of getEventDetails?.shows">
   Show ID: {{show.id}}
</li>

answered Jul 12, 2016 at 8:45

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

How to display nested objects and or arrays in angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related