Return a value from a nested success function in angularjs

Question

I'm trying to return a value from a nested function on my codes but it return me undefined whenever i tried to display it. This is my codes:

var calculateAlbum = function (albumPath,albumName) {
            return photoService.getPhotos(albumPath,albumName)
                    .success(function (data){                       
                        var status = data.myphotos.status;
                            if(status == "ok"){
                                    photoService.myphotosPhotoList()
                                        .success(function(data){
                                            $scope.allPhotoListTotal = {};
                                            var getAllPhotoList = data.config.nas_sharing;
                                            $scope.allPhotoListTotal = getAllPhotoList.count;
                                        });
                            }
                    });                 
    }

Return a value:

calculateAlbum(albumPath,fileName).then(function(data) {            
                            var gettotal = $scope.allPhotoListTotal;
                            console.log(gettotal);

                        });

After returning value in a console. It send me undefined. What is the best approached for this?

Answer 1

You forgot to return the promise of photoService.myphotosPhotoList .

You also forgot to reject the first promise when status is not ok (you can test out this case).

function calculateAlbum (albumPath,albumName) {
    return photoService.getPhotos(albumPath,albumName)
        .then(function (data){                       
            var status = data.myphotos.status;

            if(status == "ok") {
                return photoService.myphotosPhotoList()
                    .then(function(data){
                        $scope.allPhotoListTotal = {};
                        var getAllPhotoList = data.config.nas_sharing;
                        $scope.allPhotoListTotal = getAllPhotoList.count;
                    });
            }
            else {
                return $q.reject("status not ok");
            }
       });                 
}

Answer 2

You have two promises in your code, but you are only chaining off of the first (outer) promise. Your inner promise sets the value that you want, therefore you need to wait for your inner promise to resolve before you can use it.

One approach would be to inject the promise service $q and then return your own promise object.

var calculateAlbum = function (albumPath,albumName) {
        var deferred = $q.defer();
        photoService.getPhotos(albumPath,albumName)
                .success(function (data){                       
                    var status = data.myphotos.status;
                        if(status == "ok"){
                                photoService.myphotosPhotoList()
                                    .success(function(data){
                                        var getAllPhotoList = data.config.nas_sharing;
                                        $scope.allPhotoListTotal = getAllPhotoList.count;
                                        deferred.resolve(data)
                                    });
                        }
                });
        return deferred.promise;


}

Answer 3

calculateAlbum returns a promise that is fulfilled when the outer call finishes, but it doesn't take into account the inner execution. you need to return a promise inside the inner success function in order to wait for another async method. Here we leverate the power of $q to do exactly that.

var calculateAlbum = function (albumPath,albumName) {
        return photoService.getPhotos(albumPath,albumName)
                .success(function (data){                       
                    var status = data.myphotos.status;
                    var defer = $q.defer();
                        if(status == "ok"){
                                photoService.myphotosPhotoList()
                                    .success(function(data){
                                        $scope.allPhotoListTotal = {};
                                        var getAllPhotoList = data.config.nas_sharing;
                                        $scope.allPhotoListTotal = getAllPhotoList.count;
                                        defer.resolve(); //Async execution end here
                                    })
                                    .error(defer.reject);
                        } 
                        else
                           defer.reject();
                     return defer.promise;
                });                 
}

Note: this is an anti-pattern but there's no other way since photoService.myphotosPhotoList() executes only some of the time.

Edit: there is other way actually. have a look at icycool's solution