How to display json object using *ngFor

You need to implement a custom pipe to do this. ngFor only supports array and not object.

This pipe will look like that:

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

and use it like that:

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

See this question for more details:

• access key and value of object using *ngFor

You can put the keys in an array and ng-repeat the keys.

export class IterateOverObject {
    public arrayOfKeys;

    @Input heros;
    constructor() {
        this.arrayOfKeys = Object.keys(this.heros);
    }
}

<li *ngFor="#key of arrayOfKeys">
  <span class="badge">{{key}}</span> {{heros[key].name}}
</li>

This looks simple to me.. More info is here