iteration a json object on Ngfor in angular 2

问题

I\'m having trouble iteration a json object in the Ngfor, there is my template :

template:

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

people is the json object that I\'m trying to iterate, I\'m having rhe result of (people | json) and not getting the list, here is a screenshot:

and to finish, here is a 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 to help me

回答1:

Your people object isn't an array so you can iterate over it out of the box.

There is two options:

You want to iterate over a 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 a custom pipe:

@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 this way:

<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

来源：https://stackoverflow.com/questions/37431578/iteration-a-json-object-on-ngfor-in-angular-2

标签

json

angular

observable

ngfor