Angular Js - Why I am getting Undefiend in controller while I am getting data from service?

Question

I have made a service and I am getting the data but it does not return any thing to controller.

My service. js file

app.factory('countryService', function ($http) {
    return {
        getCountries: function () {
            $http.get('http://abc/countries')
                    .success(function (data) {
                        console.log(data);
                    })
                    .error(function (data) {
                        console.log(data);
                    });
        }
    };
});

and here is my controller

$scope.countries = function () {
            $scope.countries_data = countryService.getCountries();
            console.log($scope.countries_data);
        };

What is my mistake ?

Try using a `return` statement. For more information, see [MDN JavaScript Reference -- return statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return). — georgeawg, Nov 28 '16 at 11:21
@georgeawg only `return` would not work, as `.success` & `.error` function have been applied on `$http.get`, it will break promise chaining, OP has to remove `.success` & `.error` function(also they don't do anything special here) — Pankaj Parkar, Nov 28 '16 at 11:37

Dhaval Marthak · Accepted Answer · 2016-11-28T11:25:55.647

4

You might need to do some structural changes like following

app.factory('countryService', function ($http) {
    return {
        getCountries: function () {
            return $http.get('http://abc/countries'); //just return promise
        }
    };
});

Let service return the promise, Do other proceedings inside the controller,Define success callback and faiure callback for the same

$scope.countries = function () {
    $scope.countries_data = countryService.getCountries().then(success, failure); // callbaks
};

function success(response){
   console.log(response); // logs the results
}

function failure(response){
   console.log(response); // logs the errors if any
}

Hope this will help

edited Nov 28 '16 at 11:25

answered Nov 28 '16 at 11:19

Dhaval Marthak

17,246
6
46
68

1

`$http` methods does return promise object itself, so there is no need to create your own custom promise using `$q`, that would be an overhead then, I will highly recommend you to checkout [this answer](http://stackoverflow.com/a/30757201/2435473), unless you have anything special scenario, its worth avoiding deferred pattern.. – Pankaj Parkar Nov 28 '16 at 11:24
Be aware that the failure handler is **converting** a rejected promise into a successful promise. When a function lacks a return statement, it returns a value of `undefined`. This will convert a rejected promise to a fulfilled promise that resolves with the value of `undefined`. The promise stored in `$scope.countries_data` will be erroneous. – georgeawg Nov 28 '16 at 11:38

score 0 · Answer 2 · answered Nov 28 '16 at 11:20

In your service:

app.factory('countryService', function ($http) {
    return {
        getCountries: function () {
            return $http.get('http://abc/countries')  // add return this service
                    .success(function (data) {
                        console.log(data);
                    })
                    .error(function (data) {
                        console.log(data);
                    });
        }
    };
});

In controller:

$scope.countries = function () {
           countryService.getCountries().then(function(res){
 $scope.countries_data = res;
   console.log($scope.countries_data);
});

        };

Angular Js - Why I am getting Undefiend in controller while I am getting data from service?

2 Answers2