Ожидание ответа json в фабрике angularjs

Question

Я приближаюсь к своему поиску ответа JSON. В этом примере переменная событий заполняется ПОСЛЕ возврата, что приводит к пустым выводам. Мне нужно, чтобы он подождал. Я прочитал, что обещание - это путь ... но не знаю, как это будет работать ... в моем console.log вы можете увидеть массив, но Events.all(); возвращает null.

.factory('Events', function($http) { 
     var events=""; 
      $http.get('http://appserver.falconinet.com/events.lasso').then(function(resp) { 
      events = resp.data; 
       console.log(events); 
      }, function(err) { 
      console.error('ERR', err); 
      // err.status will contain the status code 
      }) 
       return { 
       all: function() { 
        return events; 
       }, 
       get: function(eventId) { 
        for (var i = 0; i < events.length; i++) { 
        if (events[i].id === parseInt(eventId)) { 
         return events[i]; 
        } 
        } 
        return null; 
       } 
       } 

     }) 

и вот мой контроллер:

// events 

    .controller('EventsCtrl', function($scope, Events) { 
     $scope.events = Events.all(); 
    }) 

    .controller('EventDetailCtrl', function($scope, $stateParams, Events) { 
     $scope.event = Events.get($stateParams.eventId); 
    }) 

Answer 1

После вернёт обещание, созданный $http, а также кэширует загрузку всех событий.

.factory('Events', function ($http, $q) { 
    function loadEvents(id) { 
     var promise = $http.get('http://appserver.falconinet.com/events.lasso', {cache: true}); 
     // return the promise 
     return promise.then(function (resp) { 
      var events = resp.data; 
      if (id) { 
       // returns item or promise rejection 
       return getEventById(id, events); 
      } else { 
       return events; 
      } 
     }).catch (function (err) { 
      console.log('Events error ', err); 
     }); 
    } 

    // helper function , returns event or promise rejection 
    function getEventById(id, events) { 
     for (var i = 0; i < events.length; i++) { 
      if (events[i].id === parseInt(eventId)) { 
       return events[i]; 
      } 
     } 
     return $q.reject('None found'); 
    } 

    return { 
     all: function() { 
      return loadEvents(); 
     }, 
     get: function (eventId) { 
      return loadEvents(eventId); 
     } 
    } 

}); 

Затем в контроллерах вы должны resove ваших данных в обещании then обратного вызова

.controller('EventsCtrl', function($scope, Events) { 
    Events.all().then(function(events){ 
     $scope.events = events; 
    }); 
}) 

.controller('EventDetailCtrl', function($scope, $stateParams, Events) { 

    Events.get($stateParams.eventId).then(function(event){ 
     $scope.event = event; 
    }); 
}) 

Answer 2

Как уже упоминалось, упаковка ваш реальный процесс в новом обетование путь. Для этого использование этой фабрики требует определенных настроек. Лемм попробовать написать образец из вашего сценария, но я не обещаю, чтобы он работал с первой попытки :)

.factory('Events', function($http, $q) { 
    return { 
    all: function() { 
     var myPromise = $q.defer(); 

     $http.get('http://appserver.falconinet.com/events.lasso') 
     .then(function(resp) { 
     myPromise.resolve(resp.data); 
     }, function(err) { 
     myPromise.reject(err); 
     }); 

     return myPromise.promise; 
    }, 
    get: function(eventId) { 
     var myPromise = $q.defer(); 

     $http.get('http://appserver.falconinet.com/events.lasso') 
     .then(function(resp) { 
     var events = resp.data; 
     for (var i = 0; i < events.length; i++) { 
      if (events[i].id === parseInt(eventId)) { 
      myPromise.resolve(events[i]); 
      } 
     } 
     }, function(err) { 
     myPromise.reject(err); 
     }); 

     return myPromise.promise; 
    } 
    } 
}); 

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

С их помощью будет выглядеть так:

// Get all 
Events.all().then(function(events){ 
    $scope.events = events; 
}); 

// Get one 
Events.get(eventId).then(function(event){ 
    $scope.events = event; 
});