CODEWITHSUNDEEP
javascriptangularjshttp
Urban
Urban

Reputation: 585

AngularJS getting undefined from $http

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.

Upvotes: 0

Views: 1102

Answers (2)

Ladmerc
Ladmerc

Reputation: 1158

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.

Upvotes: 1

kvetis
kvetis

Reputation: 7331

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;
    });        
};

Upvotes: 1

Related Questions