How to iterate through an Object attributes in Angular 2

javascript loops angular iteration ngfor

You could do something like this:

<li *ngFor="let o of obj">   <p *ngFor="let objArrayElement of generateArray(o)"> {{objArrayElement}} </p></li>

where generateArray looks like:

generateArray(obj){   return Object.keys(obj).map((key)=>{ return obj[key]});}

javascript loops angular iteration ngfor

slight modification to @eg16's answer and it worked like a charm for me -

the generateArray function looks like this-

generateArray(obj){    return Object.keys(obj).map((key)=>{ return {key:key, value:obj[key]}});}

and the template -

<li *ngFor="let item of generateArray(data)">{{item.key}}: {{item.value}}</li>

javascript loops angular iteration ngfor

Starting with version 6.1, a KeyValue Pipe is made available by Angular:

<li *ngFor="let item of (data | keyvalue)">{{item.key}}: {{item.value}}</li>

This makes previous workarounds using Object.keys references or own implementations thereof obsolete.

CodeHunter