извлечения данных из JSon файла в angularjs службы

Question

angular.module('testJsonLoadApp') 
 
    .factory('LoadJsonFactory', function($http) { 
 
    var jsonLoad = { 
 
     fetch: function() { 
 
     return $http.get('../../test.json').then(function(data) { 
 
      return data; 
 
     }); 
 
     }, 
 

 
    }; 
 

 
    return jsonLoad; 
 
    }) 
 
    .controller('MainCtrl', function ($scope, LoadJsonFactory) { 
 
    var a = []; 
 
    LoadJsonFactory.fetch().then(function(items) { 
 
     a = items; 
 
    }); 
 
    $scope.data = a; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li ng-repeat="datum in data">{{datum.id}}</li> 
 
    </ul> 
 
</div>

Вот содержимое файла Json

[{"id": "0","Name": "Items 0", "Description": "Description 0"}, 
{"id": "1","Name": "Items 1", "Description": "Description 1"}, 
{"id": "2","Name": "Items 2", "Description": "Description 2"}] 

переменная «а» в контроллере не получает обновленный с массивом генерируемой из json-файла. Однако, если я использую переменную $ scope для привязки массива напрямую, то она работает.

LoadJsonFactory.fetch().then(function(items) { 
      $scope.data = items; 
     }); 

Приведенный выше код работает.

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

Answer 1

Этот вызов является асинхронным

LoadJsonFactory.fetch().then(function(items) { 
    a = items; 
}); 

Это выполняется до того, как вызов не закончил

$scope.data = a; 

Так нет, вы не можете сделать это таким образом. a всегда будет пустым при назначении $scope.data

Вы можете сделать это, если это вам подходит, что то же самое с тем, что у вас работает, только немного яснее.

LoadJsonFactory.fetch().then(onFetch); 


function onFetch(data) { 
    $scope.data = data; 
} 

Answer 2

Вы можете назначить свой ответ службы LoadJsonFactory переменной в пределах вашей службы, а не в контроллере, а затем просто вызвать его из любого контроллера.

Например:

.factory('LoadJsonFactory', function($http) { 

var jsonResponse = []; 

return { 
    fetch: function() { 
     return $http.get('../../test.json').then(function(data) { 
     jsonResponse = data; 
    }); 
    }, 
    getResponseResult: function() { 
     return jsonResponse; 
    } 
    } 
}) 

Answer 3

Проблема с кодом является то, что $ HTTP вызов LoadJsonFactory является асинхронным. Ваш $scope.data = a запущен сразу после загрузки LoadJsonFactory.

Я сделал быстрый планшет, который иллюстрирует эту открытую консоль, чтобы понять, что я имею в виду. (Я также вымыл LoadJsonFactory немного, чтобы она более четко возвращает обещание.)

https://plnkr.co/edit/Ns1iQdvhKT6DXrfjrOjm

Присвоение $ scope.data в успехе функции обещания работает, потому что в этот момент обещание решить и присваивание запускает дайджест, который обновляет двустороннюю привязку.