How to Iterate over nested object properties in angular js?

Question

Below is my sample json. I have used ng-repeat="(key, value) as below to get desired output but it is not working.

<table border="1">
        <tr ng-repeat="(key, value) in data1">
            <td>{{key}}</td>
            <td>{{ value }}</td>
        </tr>
</table>

Sample JSON:

{
  "accessPointDetails": {
    "kernelVersion": "4.4.0",
    "videoAppVersion": "1.2.3",
    "zigbeeAppVersion": "1.2",
    "overrideFiles": [{
      "path": "/some_dir/gateway.conf",
      "sizeBytes": 0
    }],
    "sshKeyVersion": "ZA-1515092259",
    "ethInterfaces": [{
      "macAddress": "",
      "dhcpProfile": "Management",
      "ipAddress": "",
      "hostName": "",
      "identifier": "eth0",
      "switchIpAddress": "",
      "switchPort": 12
    }, {
      "macAddress": "",
      "dhcpProfile": "Zooter 1",
      "ipAddress": "",
      "hostName": "",
      "identifier": "eth1",
      "switchIpAddress": "",
      "switchPort": 12
    }],
    "wlanInterfaces": [{
      "dhcpProfile": "Gen3ZapA",
      "radioFrequency": "2.4",
      "radioVersion": "104"
    }, {
      "dhcpProfile": "Gen3Zap1",
      "radioFrequency": "5.8",
      "radioVersion": "108"
    }],
    "radioInterfaces": [{
      "identifier": 1,
      "radioVersion": "123"
    }, {
      "identifier": 2,
      "radioVersion": "123"
    }, {
      "identifier": 3,
      "radioVersion": "123"
    }, {
      "identifier": 4,
      "radioVersion": "123"
    }]
  }
}

Actual Output:

Desired Output:

share the sample json for data1

Nishanth
– Nishanth

2018-03-14 18:47:46 +00:00
Commented Mar 14, 2018 at 18:47 — Nishanth
– Nishanth, Commented Mar 14, 2018 at 18:47
added in post @Nishanth

Dharita Chokshi
– Dharita Chokshi

2018-03-14 18:51:32 +00:00
Commented Mar 14, 2018 at 18:51 — Dharita Chokshi
– Dharita Chokshi, Commented Mar 14, 2018 at 18:51
chek the answer

Nishanth
– Nishanth

2018-03-14 19:37:33 +00:00
Commented Mar 14, 2018 at 19:37 — Nishanth
– Nishanth, Commented Mar 14, 2018 at 19:37

Nishanth · Accepted Answer · 2018-03-14 19:31:07Z

Have nested ng-repeat for evry loop keep checking if the object is array

<!DOCTYPE html>
<html>
<head>
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
    <script>
        (function () {

            var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);
            app.controller('testCtrl', ['$scope', '$http', function ($scope, $http) {
                $scope.getKeys = function(val){
                  return Object.keys(val[0])
                };
                $scope.isArray = angular.isArray;
                $scope.data1 = { "accessPointDetails": { "kernelVersion": "4.4.0", "videoAppVersion": "1.2.3", "zigbeeAppVersion": "1.2", "overrideFiles": [{ "path": "/some_dir/gateway.conf", "sizeBytes": 0 }], "sshKeyVersion": "ZA-1515092259", "ethInterfaces": [{ "macAddress": "", "dhcpProfile": "Management", "ipAddress": "", "hostName": "", "identifier": "eth0", "switchIpAddress": "", "switchPort": 12 }, { "macAddress": "", "dhcpProfile": "Zooter 1", "ipAddress": "", "hostName": "", "identifier": "eth1", "switchIpAddress": "", "switchPort": 12 }], "wlanInterfaces": [{ "dhcpProfile": "Gen3ZapA", "radioFrequency": "2.4", "radioVersion": "104" }, { "dhcpProfile": "Gen3Zap1", "radioFrequency": "5.8", "radioVersion": "108" }], "radioInterfaces": [{ "identifier": 1, "radioVersion": "123" }, { "identifier": 2, "radioVersion": "123" }, { "identifier": 3, "radioVersion": "123" }, { "identifier": 4, "radioVersion": "123" }] } };
            }]);

        }());
    </script>
    <style></style>
</head>
<body ng-app="testApp">
    <div ng-controller="testCtrl">


        <table border="1">
            <tr ng-repeat="(key1, value1) in data1">
                <td>{{key1}}</td>

                <td ng-hide="isArray(value1)">
                    <table border="1">
                        <tr ng-repeat="(key2, value2) in value1">
                            <td>{{key2}}</td>
                            <td ng-hide="isArray(value2)">{{value2}}</td>
                            <td ng-show="isArray(value2)">
                              <table border="1" ng-init="keys = getKeys(value2);">
                                <tr>
                                  <th ng-repeat="th in keys">{{th}}</th>
                                </tr>
                                <tr ng-repeat="x in value2 track by $index">
                                  <td ng-repeat="th in keys">
                                      {{ x[th]}}
                                  </td>
                                </tr>
                              </table>
                            </td>
                        </tr>
                    </table>
                <td>
                <td ng-show="isArray(value1)">{{value1}}</td>

            </tr>
        </table>

    </div>
</body>
</html>

Nishanth · Accepted Answer · 2018-03-15 08:17:54Z

This is working fine, but if I change my JSON to below format, then the output is again unformatted. I need to make something generic, in case JSON is nested within 3 keys, then also it should work fine.

{
    "kernelVersion": "4.4.0",
    "videoAppVersion": "1.2.3",
    "zigbeeAppVersion": "1.2",
    "sshKeyVersion": "ZA-1515092259",
    "overrideFiles": [{
        "path": "/some_dir/gateway.conf",
        "sizeBytes": 0
    }],
    "ethInterfaces": [{
        "macAddress": "",
        "dhcpProfile": "Management",
        "ipAddress": "",
        "hostName": "",
        "identifier": "eth0",
        "switchIpAddress": "",
        "switchPort": 12
    }, {
        "macAddress": "",
        "dhcpProfile": "Zooter 1",
        "ipAddress": "",
        "hostName": "",
        "identifier": "eth1",
        "switchIpAddress": "",
        "switchPort": 12
    }],
    "wlanInterfaces": [{
        "dhcpProfile": "Gen3ZapA",
        "radioFrequency": "2.4",
        "radioVersion": "104"
    }, {
        "dhcpProfile": "Gen3Zap1",
        "radioFrequency": "5.8",
        "radioVersion": "108"
    }],
    "radioInterfaces": [{
        "identifier": 1,
        "radioVersion": "123"
    }, {
        "identifier": 2,
        "radioVersion": "123"
    }, {
        "identifier": 3,
        "radioVersion": "123"
    }, {
        "identifier": 4,
        "radioVersion": "123"
    }]
}

Update code for the above json

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);
      app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.getKeys = function(val) {
          return Object.keys(val[0])
        };
        $scope.isArray = angular.isArray;
        $scope.data1 = {"kernelVersion":"4.4.0","videoAppVersion":"1.2.3","zigbeeAppVersion":"1.2","sshKeyVersion":"ZA-1515092259","overrideFiles":[{"path":"/some_dir/gateway.conf","sizeBytes":0}],"ethInterfaces":[{"macAddress":"","dhcpProfile":"Management","ipAddress":"","hostName":"","identifier":"eth0","switchIpAddress":"","switchPort":12},{"macAddress":"","dhcpProfile":"Zooter 1","ipAddress":"","hostName":"","identifier":"eth1","switchIpAddress":"","switchPort":12}],"wlanInterfaces":[{"dhcpProfile":"Gen3ZapA","radioFrequency":"2.4","radioVersion":"104"},{"dhcpProfile":"Gen3Zap1","radioFrequency":"5.8","radioVersion":"108"}],"radioInterfaces":[{"identifier":1,"radioVersion":"123"},{"identifier":2,"radioVersion":"123"},{"identifier":3,"radioVersion":"123"},{"identifier":4,"radioVersion":"123"}]};
      }]);

    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">

    <table border="1">
      <tr ng-repeat="(key2, value2) in data1">
        <td>{{key2}}</td>
        <td ng-hide="isArray(value2)">{{value2}}</td>
        <td ng-show="isArray(value2)">
          <table border="1" ng-init="keys = getKeys(value2);">
            <tr>
              <th ng-repeat="th in keys">{{th}}</th>
            </tr>
            <tr ng-repeat="x in value2 track by $index">
              <td ng-repeat="th in keys">
                {{ x[th]}}
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

  </div>
</body>

</html>

chng table to <table border="1"> <tr ng-repeat="(key1, value1) in data1"> <td>{{key1}}</td> <td ng-hide="isArray(value1)"> <table border="1"> <tr ng-repeat="(key2, value2) in value1"> <td>{{key2}}</td> <td ng-hide="isArray(value2)">{{value2}}</td> <td ng-show="isArray(value2)"> <table border="1" ng-init="keys = getKeys(value2);"> <tr> <th ng-repeat="th in keys">{{th}}</th> </tr> <tr ng-repeat="x in value2 track by $index"> <td ng-repeat="th in keys"> {{ x[th]}} </td> </tr> </table> </td> </tr> </table> <td> <td ng-show="isArray(value1)">{{value1}}</td> </tr> </table>

Collectives™ on Stack Overflow

How to Iterate over nested object properties in angular js?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related