доступ json вложенный массив от фабричного углового

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(); 
}) 

теперь все работает отлично, и я могу просмотреть данные, когда я делаю нг-повтора на него с точки зрения

, но мне нужно вместо простой структуры 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

Пробег

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

Как указано в комментариях, я не заметил, что функция get не возвращала обещание.

Чтобы вернуть обещание, API $ http основан на API-интерфейсах отложенных/обещаний, открытых службой $ q, поэтому просто используйте приведенный ниже код в функции get с фабрикой (службой).

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

Answer 3

Попробуйте

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; 
    }); 
});