如何在角度js中迭代嵌套对象属性？

时间：2018-03-14 18:47:02

标签： angularjs

以下是我的样本json。我已经使用ng-repeat =＆＃34;（键，值）如下获得所需的输出，但它不起作用。 

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

示例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"
    }]
  }
}

实际输出：

enter image description here

期望的输出：

enter image description here

2 个答案:

答案 0 :(得分：2)

对于evry循环有嵌套的ng-repeat，请继续检查对象是否为数组

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.6.6" 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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这工作正常，但是如果我将我的JSON更改为低于格式，则输出再次未格式化。我需要制作一些通用的东西，以防JSON嵌套在3个键中，然后它也可以正常工作。

{
    "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"
    }]
}

更新上述json的代码

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" 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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题