wait for data until callback is finished

Question

regarding the question Passing data between controllers in Angular JS? I ran into the situation that my ProductService is executing some $http(RestFUL Service) and returns NULL because the callback function isn't completed.

Because the p.getProducts() function is evaluted and the callback function which fetches the data from the RestFUL service, is'nt complete the function returns always null.

app.service('productService', function() {
    p = this
    p.productList = [];

    var addProduct = function(newObj) {
        productList.push(newObj);
    }

    p.getProducts = function(){
        return $http(RestFUL Service,function(data){p.productList.push(data)});
    }

    return {
        addProduct: addProduct,
        getProducts: return p.getProducts();
    };

});

How can I solve this problem?

Is the $http call passing ? , you can add a failure handler and check , or check the network call . — user1537766, Sep 16 '14 at 10:16

score 0 · Answer 1 · answered Sep 16 '14 at 10:16

You must play with callback's. The http is an async operation, and for that reason you can´t return a valid result right away. How invoke getProducts must set as parameter a function (callback) that will be invoked when http is completed - when data is available.

app.service('productService', function() {
p = this
p.productList = [];

var addProduct = function(newObj) {
  productList.push(newObj);
}

p.getProducts = function(callback){
  $http(RestFUL Service,function(data){
    p.productList.push(data)
    callback(data);//do something with data
  });
}

return {
addProduct: addProduct,
getProducts: p.getProducts
};
}

//invoking
getProducts(function(products){
    //do something with products
});

score 0 · Accepted Answer · answered Sep 16 '14 at 10:20

If you change your service to look more like this

return {
  addProduct: addProduct,
  getProducts: p.getProducts
}

then in controller you can make it work like that

app.controller('myCtrl', function ($scope, productService) {
  var products = null

  productService.getProducts().then(function(response){
    //do something with data returned
  })
})

your getProducts return $http which itself returns promise, that's why the I used then in controller

wait for data until callback is finished

2 Answers2