How to display json object using *ngFor

Question

I want to display the below data from Firebase

{    "-KBN9O_qqz-nZ9tPWFdM":{       "createdAt":1456399292790,       "isActive":true,       "name":"Hero 1"    },    "-KBN9gjJw1ZlMgt9pVsl":{       "createdAt":1456399371220,       "isActive":true,       "name":"Hero 2"    },    "-KBN9hYI4vYAsyh5k1lX":{       "createdAt":1456399374548,       "isActive":true,       "name":"Hero 3"    } } 

when doing angular.io Tour of Heroes tutorial for example

<li *ngFor="#hero of heroes">   <span class="badge">{{hero.id}}</span> {{hero.name}} </li> 

So hero id should show for example -KBN9hYI4vYAsyh5k1lX and hero name should show for example hero 3

---

I have done some research and come across this stackoverflow solution by @Thierry Templier access key and value of object using *ngFor

(1) Is this the right solution to my problem?

(2) Is there a simpler solution to this problem because I feel that it would be really common for developers using Angular2 to display such json data.

Answer 1

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