Question

在我的角度应用程序中，我使用工厂获取json数据并将其传递给控制器。如果我使用简单的json数组但在嵌套数组中失败，它对我有用在简单的json文件的情况下，我有这个结构

[
          {
            "name": "bond_1",
            "profession": "Programmer",
            "hometown": "St Louis, MO"
          },
          {
            "name": "bond_2",
            "profession": "Salesman",
            "hometown": "Denver, CO"
          },
          {
            "name": "bond_3",
            "profession": "CEO",
            "hometown": "San Francisco, CA"
          }
]

我的工厂就是这个

.factory('Topology', function ($http){
 var data = [];
 return{
    get: function(){
        if (data.length == 0){
           $http.get("data.json") 
           .success(function (response){
               for(var i=0, ii=response.length; i<ii; i++){
                   data.push(response [i]);
               }
           });
        }
        return data;
    },
  }
});

我的控制器就是这个

var installerControllers =angular.module('installerControllers', []);
installerControllers.controller('stageThreeCtrl', function ($scope,   Topology) {
       $scope.bonds=Topology.get();
})

现在一切正常，我可以在视图中对其进行ng-repeat时查看数据

但我需要使用一个看起来像这样的嵌套数组

而不是简单的json结构

{
"bonds":[
        {
        "name": "Alex",
        "profession": "Programmer",
        "hometown": "St Louis, MO"
      },
      {
        "name": "David",
        "profession": "Salesman",
        "hometown": "Denver, CO"
      },
      {
        "name": "Laura",
        "profession": "CEO",
        "hometown": "San Francisco, CA"
      }
],
"networks":[
      {
      "name": "test",
      "all_hosts": "false",
      "IP_Version": "IPV4",
      "IP address": "10.10.10.10",
      "IPV net mask": "255.255.255.0",
      "Interface": "bond 0",
      "VLAN TAG": "4001",
      "Description": "some custom description"
    }
  ]
}

现在我试图以这种方式从控制器中调用其中一个对象

var installerControllers =angular.module('installerControllers', []);
installerControllers.controller('stageThreeCtrl', function ($scope, Topology) {
   var data=Topology.get();
   $scope.bonds=data.bonds;  
})

但它不起作用，我在console.log中得到一个空数组

非常感谢您的帮助

Answer 1

您的问题不是异步问题，您只是没有正确引用新的数据格式。我用$http替换$timeout调用，因为我没有要测试的服务器返回您的数据。由于您的数据格式已更改，您需要更改在工厂，控制器和视图中引用它的方式。

var app = angular.module('app', []).factory('Topology', function ($timeout){
  var data = {}; // no longer an array
  
  return{
    get: function(){
        if (!data.bonds){
           $timeout(function () {
               data.bonds = [{name: 'Hello World!'}]; // this would be response.bonds
               data.networks = [{name: 'Hello World!'}]; // this would be response.networks   
           }, 2000);
        }
        return data;
    },
  }
}).controller('stageThreeCtrl', function ($scope, Topology) {
   var data=Topology.get();
   $scope.data = data; // renamed to data
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <p>wait 2 seconds...</p>
  <ul ng-controller="stageThreeCtrl">
    <li ng-repeat="bond in data.bonds">{{bond.name}}</li> <!-- using data.bonds -->
  </ul>
</div>

更好的选择是进行一些小的重组，而不是利用$http返回的承诺。

var app = angular.module('app', []).factory('Topology', function ($http){
  var promise;

  return{
    get: function(){
        if (!promise){
          promise = $http.get("data.json");
        }
        return promise;
    },
  }
}).controller('stageThreeCtrl', function ($scope, Topology) {
   Topology.get().then(function (response) {
     $scope.bonds = response.data.bonds;
   });
});
// your original view should now work

Answer 2

试试这个

   angular.module('app', []).factory('Topology', function ($http,$q){
 return{
    get: function(){
        var d = $q.defer();
           $http.get("data.json") 
           .success(function (response){ 
             console.log(response)
               d.resolve(response);
           });
        return d.promise; 
    },
  }
}).controller('stageThreeCtrl', function ($scope, Topology) {
  Topology.get().then(function (response) {

    $scope.bonds = response.bonds;  
  });
});

Answer 3

尝试

Topology.get().then(function (data) {
    $scope.bonds=data.bonds;
});

正如评论中指出的那样，我没有注意到get函数没有返回一个承诺。

要返回一个promise，$ http API基于$ q服务公开的deferred / promise API，所以只需在get函数中使用下面的代码和factory（service）。

return $http.get('data.json');

从工厂角度访问json嵌套数组

3 个答案: