AngularJS service does not return value from http.get

Question

can someone help me with this code? I have problem with return value, function in controller return only

var products = {"id": 3};

I want to collect value from http.get, can someone tell me how to do that?? Controller:

$scope.product = {};
$scope.init = function () {
    $scope.loadProducts()
}

$scope.loadProducts = function () {
    // $http.get("/products/list").then(function (resp) {
    //  $scope.products = resp.data;
    // })
    $scope.products = getListProducts.loadProducts();
}

Service

var myServices = angular.module('myServices', []);
myServices.service('getListProducts', ['$http', function ($http) {
var products = {"id": 3};
this.loadProducts = function () {
    $http.get("/products/list").then(function (resp) {
        products = resp.data;
    })
    return products;
}
}]);

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Serge K., Jun 22 '17 at 10:12

score 0 · Answer 1 · answered Jun 22 '17 at 10:11

you are returning products before http success , instead use promises and resolve when http success

$scope.product = {};
$scope.init = function () {
    $scope.loadProducts()
}

$scope.loadProducts = function () {
    // $http.get("/products/list").then(function (resp) {
    //  $scope.products = resp.data;
    // })
    $scope.productPromise = getListProducts.loadProducts();
      productPromise..then(function (resp) {
        $scope.products = resp.data;
    });
}

Service

var myServices = angular.module('myServices', []);
myServices.service('getListProducts', ['$http', function ($http) {
var products = {"id": 3};
this.loadProducts = function () {
    return $http.get("/products/list");

}
}]);

score 0 · Answer 2 · answered Jun 22 '17 at 10:28

Make use of promises to enforce serialization of your async code.

Refactor your service method as:

this.loadProducts = function () {
    var getProducts = new Promise(function(resolve,reject){
         $http.get("/products/list").then(function (resp) {
             resolve(resp.data);
         })
    });
    return getProducts;
};

And your Controller method as:

 getListProducts.loadProducts().then(function(data){
   //success callback
   $scope.products = data;
 });

You can provide the error callbacks as well. Hope this helps !

score 0 · Answer 3 · answered Jun 22 '17 at 10:38

You should use promises to return values from your service. You can use $q in your service. It would help functions to run asynchronously.

myServices.service('getListProducts', ['$http','$q', function ($http,$q) {
  var products = {"id": 3};
  this.loadProducts = function () {
   var deferred = $q.defer();

    $http.get("/products/list").then(function (resp) {
       products = resp.data;
       deferred.resolve(products);
     },function(error){
        deferred.reject(error);   
     });
   return deferred.promise;
 }
}]);

And Your method in controller should handle success and error callbacks :

$scope.loadProducts = function () {

 getListProducts.loadProducts().then(function(response){
   $scope.products=response;
 },function(error){
   //your processing logic
 });
}

I hope this would help you.

AngularJS service does not return value from http.get

3 Answers3