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.

Possible duplicate of [access key and value of object using \*ngFor](http://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Pankaj Parkar, Feb 26 '16 at 09:14

score 41 · Accepted Answer · edited May 23 '17 at 10:31

41

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

edited May 23 '17 at 10:31

Community

1
1

answered Feb 26 '16 at 08:59

Thierry Templier

198,364
44
396
360

Hi Thierry, is there a simpler solution? – Jek Feb 26 '16 at 09:01
Good explanation here, check this - How to use Pipes: https://medium.com/front-end-hacking/angular-2-let-s-talk-about-pipes-ng-filter-in-angular-1-f46319edaf73#.fw9qvebjv – Ankit Maheshwari Aug 25 '16 at 13:37
`Object.keys(value).forEach(key => { if (value.hasOwnProperty(key)) { keys = [...keys, { key, value: value[key] }]; } });` – Boštjan Pišler Jan 25 '17 at 18:46
No need to check for .hasOwnProperty since Object.keys() returns own properties. The Object.keys() method returns an array of a given object's own enumerable properties. – kevinius Mar 01 '17 at 19:28
This works for Angular5 without the `#`. You can also add a search filter with `` and `*ngFor="#entry of content | keys | filter:term"`. Further you can search multiple properties with `keys.push({key: 'key'+'value[key].prop', value: value[key]})`. – Leo Nov 13 '17 at 21:20

score 9 · Answer 2 · answered Feb 26 '16 at 09:09

9

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

answered Feb 26 '16 at 09:09

Siva

2,735
16
14

Simple and effective! – FrancescoMussi Dec 05 '16 at 13:51

score 4 · Answer 3 · answered Jul 26 '16 at 23:06

4

Firebase id is called $.key. Also, # is now changed to let. This would work for you:

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.$key}}</span> {{hero.name}}
</li>

answered Jul 26 '16 at 23:06

Andreas Hopen

49
1
1

score 0 · Answer 4 · answered Feb 11 '21 at 15:12

Angular did support KeyValuePipe from version 6.1

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

More info: https://angular.io/api/common/KeyValuePipe

How to display json object using *ngFor

4 Answers4

Linked

Related