angular return a promise

Question

I have a problem with a promise. This is the controller for a detail page. I want to get the item details from a web service (or from the local store if they are stored).

app.controller('ProductCtrl', function($scope, productsService) {
    //load the product by id from productService
    productsService.get("CODE-1111").then(function(result){
        $scope.currProduct = result;
        $scope.currProductSizes = $scope.currProduct.sizes;
    });
}

app.service('productsService', function($http, localStorageService){
    var _key = 'myProducts'
    var _storedData = []
    var self = this;
    self.get = function(id){
        var i = 0;
        return self.getAll().then(function(result) {
            //get the item by id
            _storedData = result;
            for(i=0;i<_storedData.length;i++){
                if(_storedData[i].id == id)
                    break;
            }
            return _storedData[i];
         });
    }
    self.getAll = function() {
        _storedData = localStorageService.get(_key);
        if(_storedData != null){
            **//How return a promise here? Or how I can handle it**
            return _storedData instanceof Array ? _storedData : [_storedData];
        }
        else{
            var url = baseUrl + "api/GetStyles";
            return $http({method: 'GET', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }})
                    .then(function(response) {
                            _storedData = mapToProducts(JSON.parse(response.data));
                            return _storedData;
                        }, 
                        function(response) {
                            console.log(response.status);
                    });
        }
    };

})

The first time (the items aren't in the local store) all works well because the getAll method return a promise, but the second time it doesn't return a promice so I get

Cannot read property 'then' of undefined

How I can solve this?

score 2 · Accepted Answer · answered Aug 04 '15 at 16:40

2

You can return a promise like this:

return $q.when(_storedData instanceof Array ? _storedData : [_storedData]);

answered Aug 04 '15 at 16:40

Zachary Kuhn

1,152
6
13

Thanks a lot, works fine! just a question do you think is correct the way I'm using the promises ? – DevT Aug 04 '15 at 16:46
Yes, I think the way you are handling things are typical of many Angular programs I have seen. – Zachary Kuhn Aug 04 '15 at 17:59

score -1 · Answer 2 · answered Aug 04 '15 at 16:52

You need to response a promise in your get and getAll functions, I changed your functions to do that:

app.service('productsService', ['$http', '$q', 'localStorageService', function($http, $q, localStorageService){
    var q = $q;
    var _key = 'myProducts';
    var _storedData = [];
    var self = this;

    self.get = function(id){
        var deferred = q.defer(); //Initialize your own promise
        var i = 0;
        self.getAll().then(function(result) {
            //get the item by id
            _storedData = result;
            for(i=0;i<_storedData.length;i++){
                if(_storedData[i].id == id)
                    break;
            }
            return deferred.resolve(_storedData[i]); //This is your response for success
        }).catch(function(error) {
            deferred.reject(error); //This is your response for failure
        });
        return deferred.promise; //return the promise
    }

    self.getAll = function() {
        var deferred = q.defer(); //Initialize your own promise
        _storedData = localStorageService.get(_key);
        if(_storedData != null){
            var data = _storedData instanceof Array ? _storedData : [_storedData];
            deferred.resolve(data);
        } else {
            var url = baseUrl + "api/GetStyles";
            $http({method: 'GET', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }}).then(function(response) {
                _storedData = mapToProducts(JSON.parse(response.data));
                deferred.resolve(_storedData); //This is your response for success
            }, function(error) {
                deferred.reject(error); //This is your response for failure
            });
        }
        return deferred.promise;
    };
}]);

No! Avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572). — Bergi, Aug 04 '15 at 19:20

angular return a promise

2 Answers2