Question

这是我的代码，需要检索json数据的某些部分

这是我的json数据，在这里我需要检索在嵌套的json数组中的topology-id，node-id，tp-id，所以写一些代码只检查一次，我对angularjs.so的帮助很新我解决了这个问题

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
<body>
<div ng-app="list">
<div ng-controller="ListCtrl">
<ul ng-repeat="data in network-topology">
        <li >{{data.topology}}</li>

    </ul>
</div>
<div ng-controller="ListCtrl">
<ul ng-repeat="data1 in topology">
        <li >{{data1.topology-id}}</li>
</ul>
</div>
<div ng-controller="ListCtrl">
<ul ng-repeat="data2 in node">
        <li >{{data2.node-id}}</li>

    </ul>
</div>

<div ng-controller="ListCtrl">
<ul ng-repeat="data3 in termination-point">
        <li >{{data3.tp-id}}</li>  
    </ul>
</div>
<script>
var app = angular.module('list', ['base64']);
app.controller('ListCtrl', function($scope, $http, $base64) {

$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; 
$http.defaults.headers.common['Authorization'] = 'Basic ' + $base64.encode('admin' + ':' + 'admin');

  $http({
    method: 'GET',
    url: 'http://10.132.32.212:8181/restconf/operational/network-topology:network-topology/',
    contentType: 'application/json; charset=utf-8',
  }).success(function(tdata) {
	$scope.network-topology= tdata.network-topology;
	$scope.topology= tdata.topology;
	$scope.topology-id = tdata.topology-id;
    $scope.node-id = tdata.node-id;
	$scope.tp-id = tdata.tp-id;
    $scope.topology= [];
    $scope.node= [];
    $scope.termination-point= [];
    angular.forEach(tdata.network-topology, function(network-topology, index){
               angular.forEach(network-topology.topology, function(topology, index){
    		     angular.forEach(network-topology.topology.node, function(node, index) {
                   angular.forEach(network-topology.topology.node.termination-point, function(termination-point, index){
                                                 $scope.termination-point.push(termination-point);
             });
    	 });
      });
  });

</script>
</body>
</html>

＆＃13;

Answer 1

这是完整的代码，一旦检查并让我知道

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="list">
<div ng-controller="ListCtrl">
<div ng-repeat='data1 in data["network-topology"].topology'>
          {{data1["topology-id"]}}
            <div ng-repeat='data2 in data1.node'>
              {{data2["node-id"]}}

            <div ng-repeat='data3 in data2["termination-point"]'>
              {{data3["tp-id"]}}
            </div>
            </div>
        </div>
<script>
angular.module('list', []).controller('ListCtrl', function($rootScope) {
  $rootScope.jsonData={
"network-topology": {
  "topology": [{
    "topology-id": "flow:1",
    "node": [{
      "node-id": "openflow:1",
      "termination-point": [{
        "tp-id": "openflow:1:2",
        "opendaylight-topology-inventory:inventory-node-connector-re‌f": "/opendaylight-in‌ventory:nodes"
      }]
    }]
  }]
}
}
});
</script>
</body>
</html>

＆＃13;

Answer 2

当您在属性中使用“ - ”成为angularjs中的减法时，建议用户使用下划线（网络拓扑而不是network_topology）

$rootScope.jsonData={
"network-topology": {
  "topology": [{
    "topology-id": "flow:1",
    "node": [{
      "node-id": "openflow:1",
      "termination-point": [{
        "tp-id": "openflow:1:2",
        "opendaylight-topology-inventory:inventory-node-connector-re‌f": "/opendaylight-in‌ventory:nodes"
      }]
    }]
  }]
}
}

视图

<div ng-repeat='data1 in data["network-topology"].topology'>
          {{data1["topology-id"]}}
            <div ng-repeat='data2 in data1.node'>
              {{data2["node-id"]}}

            <div ng-repeat='data3 in data2["termination-point"]'>
              {{data3["tp-id"]}}
            </div>
            </div>
        </div>

输出：

flow:1
openflow:1
openflow:1:2

Answer 3

我认为这将是你的最终代码

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
    <body>
    <div ng-app="list">
    <div ng-controller="ListCtrl">
    <div ng-repeat='data1 in data["network-topology"].topology'>
          {{data1["topology-id"]}}
            <div ng-repeat='data2 in data1.node'>
              {{data2["node-id"]}}

            <div ng-repeat='data3 in data2["termination-point"]'>
              {{data3["tp-id"]}}
            </div>
            </div>
        </div>
    </div>
</div>
    <script>
var app = angular.module('list', ['base64']);
app.controller('ListCtrl', function($scope, $http, $base64) {

   $http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; 
   $http.defaults.headers.common['Authorization'] = 'Basic ' + $base64.encode('admin' + ':' + 'admin');

 $http({
   method: 'GET',
   url: 'http://10.132.32.212:8181/restconf/operational/network-topology:network-topology/',
   contentType: 'application/json; charset=utf-8',
 }).success(function(tdata) {
   $scope.data= tdata;
  
      });
     });
 

</script>
</body>
</html>

＆＃13;

如何使用angularjs访问嵌套的json数组

3 个答案: