adongo adongo - 1 year ago 371
AngularJS Question

How to display nested objects and or arrays in angular 2

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:

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: {{}}

this time i didn't get an error but there is no display values of

Data from back-end

"banner_image": null,
"categories": [],
"creator": {
"email": "",
"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

Answer Source

You probably just want to do this:

<li>Creator Email: {{}}</li>

And for the arrays:

<li *ngFor="let show of getEventDetails?.shows">
   Show ID: {{}}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download