How to use ng-repeat to iterate over map entries in AngularJS

Question

How would you iterate over the entries in map such that both the entry key and the value can be printed? For example, I'd like to do something like this:

<ul>
    <li ng-repeat='mapEntry in {"First Name":"John", "Last Name":"Smith"}'>
        <span>Key: {{mapEntry.key}}, value: {{mapEntry.value}}</span>
    </li>
</ul>

If looking to iterate through an actual `Map`, this questions covers it: https://stackoverflow.com/questions/44073208/how-to-iterate-through-javascript-maps-using-ng-repeat-in-angularjs — Mel, Aug 18 '17 at 09:26

score 152 · Accepted Answer · edited Oct 29 '19 at 13:04

152

From the docs, I found this syntax works:

<ul>
    <li ng-repeat='(key, value) in {"First Name":"John", "Last Name":"Smith"}'>
        <span>Key: {{key}}, value: {{value}}</span>
    </li>
</ul>

edited Oct 29 '19 at 13:04

Bart de Ruijter

917
10
21

answered Feb 05 '13 at 09:33

Alex Spurling

54,094
23
70
76

How to use ng-repeat to iterate over map entries in AngularJS

1 Answers1

Linked