Iteration of json object on Ngfor in angular 2

Question

I had a problem with iterating a json object in Ngfor, there is my template:

:

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

people is a json object that I'm trying to repeat, I get the result (people | json) and don't get the list, here is a screenshot:

and to complete, here is the json file part:

 { "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 to help me

Answer 1

Your people object is not an array, so you can iterate it out of the box.

There are two options:

• You want to iterate over the sub property. For example:

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

• You want to iterate over the keys of your object. In this case, you need to implement your own channel:

   @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { if (!value) { return value; } let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; } } 

  and use it as follows:

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

  See this answer for more details:

  • How to display json object using * ngFor