How can I iterate over multiple maps (key,value) using ng-repeat in AngularJS

Question

In my controller, I have data like this:

"type":       [
              {
        "aMap": {"5.0": 0},
        "bMap": {"10.0": 0},
        "cMap": {"15.0": 0},
        "dMap": {"20.0": 0},
        "desc": "CG"
},
{
        "aMap": {"5.0": 0},
        "bMap": {"10.0": 0},
        "cMap": {"15.0": 0},
        "dMap": {"20.0": 0},
        "desc": "CG"
}]

It contains arrays which has multiple maps. I want to read both key, value in the maps in my html using ng-repeat. How can I do this?

possible duplicate of http://stackoverflow.com/questions/14704147/how-to-use-ng-repeat-to-iterate-over-map-entries-in-angularjs — Naghaveer R, Feb 06 '17 at 09:36
Possible duplicate of [How to use ng-repeat to iterate over map entries in AngularJS](http://stackoverflow.com/questions/14704147/how-to-use-ng-repeat-to-iterate-over-map-entries-in-angularjs) — frhd, Feb 06 '17 at 09:45

score 0 · Answer 1 · answered Feb 06 '17 at 09:31

0

You can use ng-repeat like this:

<div ng-repeat="foo in data">
  <div ng-repeat="(key, val) in foo">

answered Feb 06 '17 at 09:31

rrd

5,789
3
28
36

daan.desmedt · Accepted Answer · 2017-02-06T09:51:36.090

0

In your view you can loop using:

<div ng-repeat="item in type">
    <div ng-repeat="(key, val) in item">
      <b>KEY</b> : {{key}}
      <b>ITEM</b> : {{val}}
      <br/>
      <i>KEY / VAL of data :</i>
      <div ng-repeat="(keylower, vallower) in val">
        {{keylower}} - {{vallower}}
      </div>
      <br/><br/>
    </div>
</div>

See this code example on Plunkr : https://plnkr.co/edit/nXEwJ5IcD4Cu8wrFjR2R?p=preview

edited Feb 06 '17 at 09:51

answered Feb 06 '17 at 09:42

daan.desmedt

3,752
1
19
33

Here Item is still an array. How do I read the (key,value) in that as well? – Tanuj Feb 06 '17 at 09:48
Thank you so much @daan.desmedt :) – Tanuj Feb 06 '17 at 10:01
Do you have any idea how will I display it in a table? – Tanuj Feb 06 '17 at 10:20
If it answers your question, please accept this as the answer. How do you want the table to look like? – daan.desmedt Feb 06 '17 at 10:26
It should be like: desc aMapKey aMapValue bMapKey bMapValue cMapKey cMapValue dMapKey dMapValue – Tanuj Feb 06 '17 at 10:34
You can wrap the repeaters in the mentioned table structure. Just replace the `
` with the matching table elements.
– daan.desmedt Feb 06 '17 at 10:41

How can I iterate over multiple maps (key,value) using ng-repeat in AngularJS

2 Answers2