Angular2 rc.6
I am getting following error when running a loop on json data
core.umd.js:5995 EXCEPTION: Error in app/modules/mbs/components/menu.html:5:4 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
my html loop, Note: I simply want to iterate properties and arrays inside the response.
<li *ngFor="let item of menuItems">
{{item}}
</li>
my service method
getMenuItems():Promise<any>{
return this.http.get('api/menu').toPromise().
then(response => response.json())
.catch(this.handleError)
}
following is my json response
{
"text":"Menu",
"children":[
{
"text":"Home",
"url":"/spatt-web/home"
},
{
"text":"Configure",
"children":[
{
"text":"Tri-Party Program",
"children":[
{
"text":"Margins and Filters",
"url":"/sp-rrp/config/operation"
},
{
"text":"Fields and Desirability",
"url":"/spatt-rrp/config/program"
}
]
},
{
"text":"Shared Settings",
"url":"/shared-config/config"
},
{
"text":"SOMA Limits",
"url":"/outright-config/config"
}
]
},
{
"text":"Plan",
"children":[
{
"text":"Tri-Party RRP Operations",
"url":"/spatt-rrp/plan"
}
]
},
{
"text":"Track"
},
{
"text":"Administer"
},
{
"text":"Help",
"children":[
{
"text":"RRP Operations",
"url":"RRPference"
},
{
"text":"RRP Margin Calls and Recalls",
"url":"RRPRecallference"
}
]
}
]
}
It looks like you want
<li *ngFor="let item of menuItems.children">
{{item}}
</li>
in case you are trying to iterate on an object:
<div *ngFor="let location of locations | keyvalue">
{{location.key}} - {{location.value | json}}
</div>
KeyValuePipe Documntation
Generally speaking, the error means you are trying to iterate on an object instead of array or observable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With