Defer return of factory until loop is completely finished angularjs

Question

I'm trying to make a method that returns an array of objects after getting the objects from an API. The problem is that the return from the factory happens before all the calls are finished. I've tried to use $q.defer but it still sends the return before it's ready to ship. This is what I've come up with so far.

angular.module('watchList').factory('storageService', ['$http', '$q', function ($http, $q) {
storage = {};

storage.getMovies = function () {

    var movies = localStorage.getItem('movies');
    var movieArray = angular.fromJson(movies);
    var newArray = [];
    var defer = $q.defer();

    angular.forEach(movieArray, function (id) {
            newArray.push($http.get(api + id));
    });
    $q.all(newArray).then(function (response) {
            defer.resolve(response);
     });

    return defer.promise;
}

This is the controller that I'm trying to make the call from

angular.module('watchList').controller('watchListController', ['$scope', 'storageService', function ($scope, storageService) {
$scope.movies = storageService.getMovies();

I want the loop to finish everything before it returns the array.

Take a look here. It will help you stackoverflow.com/questions/18983138/… — Steeve Pitis
– Steeve Pitis, Commented Mar 3, 2017 at 18:03
Put your return in a function and call that from your api success callback. this way you won't return anything until the api call is completed. — PersyJack
– PersyJack, Commented Mar 3, 2017 at 18:14

trincot · Accepted Answer · 2017-03-03 18:52:25Z

0

You don't need to create a promise, you can just return the promise returned by the $q.all(newArray) call.

The thing is that you cannot expect to get a result synchronously when it only becomes available asynchronously. So you need to keep with using then:

storage.getMovies = function () {
    var movies = localStorage.getItem('movies');
    var movieArray = angular.fromJson(movies);
    var newArray = movieArray.map(function (id) {
        return $http.get(api + id);
    });
    return $q.all(newArray);
}

storageService.getMovies().then(function(movies) {
    $scope.movies = movies;
    // ... other code working with $scope.movies 
});

Side note: the map method does what you do with forEach, but immediately returns the array, which is quite practical.

edited Mar 3, 2017 at 18:52

answered Mar 3, 2017 at 18:08

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Knikedix Over a year ago

I'm using angular 1 right now which doesn't have angular.map. I tried with angular.forEach but it did not work.

trincot Over a year ago

Try the array method map instead. See updated code.

PeteH · Accepted Answer · 2017-03-03 18:07:45Z

-1

getMovies will return immediately with a promise. You need to use "then" to wait on that promise.

$scope.movies = storageService.getMovies().then((response) => ...)

answered Mar 3, 2017 at 18:07

PeteH

796 bronze badges

Collectives™ on Stack Overflow

Defer return of factory until loop is completely finished angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related