AngularJS getting undefined from $http

Question

I'm currently working on a little AngularJS project.

I got this code in my Service.

    testApp.service('testService',['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http){

    this.getDetails= function(name){

        $http({
            method : "GET",
            url : "url"       
        }).then(function mySucces(response) {
           return response.data;
        }, function myError(response) {
            $scope.myWelcome = response.statusText;
        });

    };

}]);

I'm calling the method from my service in a controller:

testApp.controller('mainController', ['$scope', '$http', 'testService', function($scope, $http, testService){

    $scope.details;

    $scope.loadDetails= function(val){
        $scope.details= testService.getDetails(val);
        console.log($scope.details);
        console.log(val);
    };

}]);

The $scope.loadDetails is being called in my view when a user is typing something in a search field. So it has to auto-update the dropdown.

The response.data in the service returns an array. But the $scope.details in the controller stays undefined. Anyone knows how to return the response.data from the service to the controller?

I already tried returning the response.data outside the $http, but i keep getting undefined in the controller.

can you add the dependency list for the service and controller, I suspect you didn't inject something\ — Bernard 'Beta Berlin' Parah
– Bernard 'Beta Berlin' Parah, Commented Mar 19, 2017 at 11:00

kvetis · Accepted Answer · 2017-03-19 11:18:00Z

The communication via $http is asynchronous and works through promises. The call to $http returns a promise and the .then call returns a promise as well. If you add return response.data there the resulting promise will be resolved with the array of your data. You need to return the promise from the getDetails function as well, therefore add return $http(....

Now, in your controller, when you call testService.getDetails() you will get the promise. It is not the result itself though, so there's no point in assigning the returned value to scope. Instead, you need to call another .then on that promise with a callback function that will assign the value to the $scope.

In service:

this.getDetails= function(name){

    return $http({
        method : "GET",
        url : "url"       
    }).then(function (response) {
       return response.data;
    });

};

In controller:

$scope.loadDetails= function(val) {
    testService.getDetails(val).then(function(data) {
        $scope.details = data;
    });        
};

It finally worked! Thank you very much for the good explanation.

Community · Accepted Answer · 2017-08-22 17:45:24Z

1

You're handling the promises the wrong way. This line:

$scope.details = detailsService.getDetails(val); assigns the return value of detailsService.getDetails to $scope.details. Currently the detailsService.getDetails doesn't return anything and so you get undefined. If you must handle the response in the service, then you can do something like:

return $http({
  method : "GET",
  url : "url"      
})`

You're returning the $http promise.

edited Aug 22, 2017 at 17:45

CommunityBot

11 silver badge

answered Mar 19, 2017 at 11:02

Ladmerc

1,15811 silver badges18 bronze badges

2 Comments

Urban Over a year ago

If i understand this correctly, even though i use return response.data in the service it still returns a promes?

Ladmerc Over a year ago

Right now you're not returning the promise. The http is asynchronous and your response.data gets returned late. At that time the getDetails function has returned undefined already

Collectives™ on Stack Overflow

AngularJS getting undefined from $http

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related