How to iterate dictionary in angular template?

Question

In our angular application, from controller I have returned a dictionary. How can I display the same in html template using *ngFor?

Please anyone help to achieve the same

Possible duplicate of [Iterate over object in Angular](https://stackoverflow.com/questions/31490713/iterate-over-object-in-angular) — aloisdg, Oct 12 '18 at 14:47

score 39 · Answer 1 · answered Feb 05 '19 at 09:38

39

You can use the built-in keyvalue pipe like this:

<span *ngFor="let item of content | keyvalue">           
  Key: {{item.key}}, Value: {{item.value}}
</span>

answered Feb 05 '19 at 09:38

Frederik Struck-Schøning

12,471
8
59
64

2

I like this answer better than the voted one since it's using built-in feature +1 – Itai Spector Jan 19 '20 at 13:09

score 8 · Accepted Answer · edited Feb 05 '19 at 08:38

8

You can create a pipe that maps the object (dictionary) to an array containing of type : { key: string,value: any }

Somthing like this:

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

and use it like that in the html file:

<span *ngFor="let item of content | mapToArray">           
  Key: {{item.key}}, Value: {{item.value}}
</span>

edited Feb 05 '19 at 08:38

Frederik Struck-Schøning

12,471
8
59
64

answered Mar 01 '18 at 10:34

Ofek Amram

452
2
6

I have imported the class.I am getting the below error: The pipe 'mapToArray' could not be found. – Krishnan Mar 01 '18 at 10:51
1

you need to declare pipes just like components inside the decleration array in your module – Ofek Amram Mar 01 '18 at 11:02
I use this solution but get error 'error TS2554: Expected 2 arguments, but got 1' on mapToArray in html file. how to solve this error? – Hessam Hosseini Jun 02 '22 at 13:23

How to iterate dictionary in angular template?

2 Answers2