Getting Data From Service

Question

Here is my controller and service:

var app = angular.module('myApp', ['ui.bootstrap']);

app.service("BrandService", ['$http', function($http){
this.reloadlist = function(){
    var list;
     $http.get('/admin.brands/getJSONDataOfSearch').
        success(function(data, status, headers, config) {
          list = data;
        }).
        error(function(data, status, headers, config) {

        });
     return list;
};

}]);

app.controller('BrandsCtrl', ['$scope','$http','$controller','BrandService', function($scope, $http, $controller, BrandService) {
    $scope.brands = BrandService.reloadlist();
    angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
}]);

I searched for this issue and tried answers of questions but I couldn't get solution. I am new at angular so can you explain with details; why I couldn't get the data from service to controller this way ?

Mathieu Bertin · Accepted Answer · 2015-06-08 09:22:18Z

1

The return used for data is for the callback of your function. You must use the promise returned by $http like this.

In your service return the promise :

return  $http.get('/admin.brands/getJSONDataOfSearch').
            success(function(data, status, headers, config) {
              return data;
            }).
            error(function(data, status, headers, config) {

            });

Use then() on the promise in your controller :

  BrandService.reloadlist()
     .then(function (data){
       $scope.brands = data;      
     });

answered Jun 8, 2015 at 9:22

Mathieu Bertin

1,62411 silver badges11 bronze badges

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

Comments

fdreger · Accepted Answer · 2015-06-08 09:17:12Z

1

It's not angular, it's the Javascript. The function you put in this.reloadlist does not return any value. It has no return at all, so the value returned will be undefined. The success handler does return something, but it will be run long after reloadlist finished working.

answered Jun 8, 2015 at 9:17

fdreger

12.6k1 gold badge38 silver badges46 bronze badges

1 Comment

fdreger Over a year ago

your update is completely wrong (did you try to understand the advice?...). You still returned list before the data was read. (quote: "it will be run long after reloadList finished working").

Stefan · Accepted Answer · 2015-06-08 09:27:10Z

1

Besides what @fdreger already pointed out (missing return value), $http.get(...) is an async method. The return value is a promise not the actual value. In order to access the value you need to return it from reloadlist like this:

this.reloadList = function() {
  return $http.get('/admin.brands/getJSONDataOfSearch');
  // you need to handle the promise in here. You could add a error handling here later by catching stuff...
}

and in the controller you can add it to the $scope like this:

BrandService
  .reloadlist()
  .then(function(res) {
    $scope.brands = res.data;
  });

The callback passed to then() is called as soon as the HTTP request has successfully completed, this makes the call asynchronous.

Besides the angular documentation for promises the article on MDN is a good read too.

edited Jun 8, 2015 at 9:27

answered Jun 8, 2015 at 9:23

Stefan

14.9k4 gold badges59 silver badges63 bronze badges

2 Comments

GaripTipici Over a year ago

What is promise ? Why do I need to use it ?

fdreger Over a year ago

@GaripTipici: this qualifies as another question . Starting angularjs without knowing JavaScript and at least trying to read up on promises is probably too many things at once.

Collectives™ on Stack Overflow

Getting Data From Service

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related