angular loop through nested json array

Question

I have the following json structure

     "bonds": [
{
  "name": "bond_0",
  "interface": [
    "nic_0",
    "nic_1"
  ],
  "mode": "active_standby",
  "primary_interface": "nic_0"
},
{
  "name": "bond_1",
  "interface": [
    "nic_0",
    "nic_1"
  ],
  "mode": "active_standby",
  "primary_interface": "nic_0"
}

]

I need to loop and display the data in a table. although I can display all the values ihave trouble to display the interface array. I tried to do this with ng-repeat="interface in bond.interfaces but it is not working. your help will be appreciated at my view the code is

<table class="table">
            <tr>
              <th>Name</th>
              <th>interface</th>
              <th>mode</th>
              <th>primary interface</th>
            </tr>
            <tr ng-repeat="bond in bonds">
              <td><div>{{bond.name}}</div></td>
              <td><table><tr ng-repeat="interface in bond.interfaces"><td>{{interface}}</td></tr></table></td>
              <td>{{bond.mode}}</td>
              <td>{{bond.primary_interface}}</td>
            </tr>
          </table>

Typo? interface v/s interfaces. Also is the object bonds assigned directly to the scope? — PSL
– PSL, Commented Jun 14, 2015 at 16:32

Nikhil Aggarwal · Accepted Answer · 2015-06-14 16:31:12Z

1

Please update your code from

<tr ng-repeat="interface in bond.interfaces">

to

<tr ng-repeat="interface in bond.interface">

bond has interface as a property. So bond.interface will work.

answered Jun 14, 2015 at 16:31

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular loop through nested json array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related