Tanuj Tanuj - 4 years ago 100
AngularJS Question

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

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?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download