iteration a json object on Ngfor in angular 2

by

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:

More Related Contents:

  1. Angular 2+ and Observables: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘select’
  2. How to import JSON File into a TypeScript file?
  3. How to fetch JSON file in Angular 2
  4. Angular 2: Get Values of Multiple Checked Checkboxes
  5. get multiple checkbox value as an array in angular
  6. How to get Date object from json Response in typescript
  7. How to parse a JSON object to a TypeScript Object
  8. Angular: ‘Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays’
  9. Iterate a Json Object with ngFor
  10. Angular2 Ansychronous bootstrapping with external json configuration file
  11. Angular: Typescript casting JSON response as object model not working
  12. json.Marshal(struct) returns “{}”
  13. Why is JSON invalid if an integer begins with a leading zero?
  14. How to merge 2 JSON objects from 2 files using jq?
  15. Load images based on dynamic path in ReactJs
  16. Select objects based on value of variable in object using jq
  17. JSON integers: limit on size
  18. express.json vs bodyParser.json
  19. Convert Mongoose docs to json
  20. How can I deserialize JSON with a top-level array using Serde?
  21. Deserializing JSON in Visual basic
  22. How can I use Serde with a JSON array with different objects for successes and errors?
  23. REST with Spring and Jackson full data binding
  24. Swift JSONDecoder typeMismatch error
  25. Check if a Postgres JSON array contains a string
  26. Merging http observables using forkjoin
  27. How to create variable in ngFor loop?
  28. Filter Array Using Checkboxes with AngularJS
  29. How can I do JSON serializer ignore navigation properties?
  30. Error handling using JSONDecoder in Swift

Leave a Comment