iteration a json object on Ngfor in angular 2 -

i'm having trouble iteration json object in ngfor, there template :

template:

<h1>hey</h1>   <div>{{ people| json}}</div>   <h1>***************************</h1>   <ul>     <li *ngfor="#person of people">         {{           person.label         }}     </li>  </ul> 

people json object i'm trying iterate, i'm having rhe result of (people | json) , not getting list, here screenshot:

and finish, here part of json file :

{ "actionlist": { "count": 35, "list": [     {     "action": {         "label": "a1",         "httpmethod": "post",         "actiontype": "indexation",         "status": "active",         "description": "ajout d'une transcription dans le lac de données",         "resourcepattern": "transcriptions/",         "parameters": [             {                 "parameter": {                     "label": "",                     "description": "flux json à indexer",                     "identifier": "2",                     "parametertype": "body",                     "datatype": "json",                     "requesttype": "action",                     "processparameter": {                         "label": "",                         "description": "flux json à indexer",                         "identifier": "4",                         "parametertype": "body",                         "datatype": "json",                         "requesttype": "process"                     }                 }             }, 

please feel free me

your people object isn't array can iterate on out of box.

there 2 options:

• you want iterate on sub property. example:

  <ul>   <li *ngfor="#person of people?.actionlist?.list">     {{       person.label     }}   </li> </ul> 

• you want iterate on keys of object. in case, need implement custom pipe:

  @pipe({name: 'keys'}) export class keyspipe implements pipetransform {   transform(value, args:string[]) : {     if (!value) {       return value;     }       let keys = [];     (let key in value) {       keys.push({key: key, value: value[key]});     }      return keys;   }  }  

  and use way:

  <ul>   <li *ngfor="#person of people | keys">     {{       person.value.xx     }}   </li> </ul> 

  see answer more details:

  • how display json object using *ngfor