CODEWITHSUNDEEP
angularangular2-services
d-man
d-man

Reputation: 58113

angular2 NgFor only supports binding to Iterables such as Arrays

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"
            }
         ]
      }
   ]
}

Upvotes: 16

Views: 76047

Answers (3)

Hasan
Hasan

Reputation: 121

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

Upvotes: 11

JanBrus
JanBrus

Reputation: 1540

Generally speaking, the error means you are trying to iterate on an object instead of array or observable.

Upvotes: 1

Pritesh Acharya
Pritesh Acharya

Reputation: 1626

It looks like you want

<li *ngFor="let item of menuItems.children">
{{item}}
</li>

Upvotes: 19

Related Questions