Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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

share|improve this question
    
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 – rinukkusu Jul 12 '16 at 7:56
    
Thanks @rinukkusu it works for me but is there a way to values of the sub arrays – adongo Jul 12 '16 at 8:19
    
Not with *ngFor. Without it you can just use {{getEventDetails.creator.email}}. – rinukkusu Jul 12 '16 at 8:38
up vote 1 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.