Service Data Undefined in Controller AngularJS

Question

I am trying to access a service and then return the response to a Controller for shared data usage. Here is my service which returns the phone List:

app.service('DataService', ['$http', function($http){
    this.getData = function(){
        var promise = $http.get('js/products.json').then(function(response){
            return response.data;
        });
        return promise;
    }
}]);

And in the controller:

app.directive('phoneList',[function(){
    return {
        restrict: 'E',
        templateUrl: 'phone-list.html',
        controller: ['$http', '$scope', 'DataService', function($http, $scope, DataService){
            DataService.getData()
            .then(function(response){
                $scope.products = response;
            });
            console.log($scope.products)
        }],
        controllerAs: 'homeCtrl'
    };
}]);

But when I am logging $scope.products in Console, it just prints undefined. Any leads would be appreciated.

Sounds like DataService must be a promise. So try DataService.getData().then(function(response) { $scope.products = response }); — Red
– Red, Commented Sep 11, 2017 at 11:31
I understand that it must return a promise, but resolving a promise in controller beats me up saying 'TypeError: Cannot read property 'then' of undefined.' — Mohit Sharma
– Mohit Sharma, Commented Sep 11, 2017 at 11:35
Ok, read my update. You must return the promise in the service. — Red
– Red, Commented Sep 11, 2017 at 11:37
Eh .. you keep updating you're code with awnsers. Now my awnser is completely useless lol. — Red
– Red, Commented Sep 11, 2017 at 11:51

Red · Accepted Answer · 2017-09-11 11:45:22Z

1

$http returns a promise. So in your service you have to return the $http call as a promise.

Replace your service with:

app.service('DataService', ['$http', function($http){
    this.getData = function(){

        // Create a var. This will hold the angular promise which you have to return later on
        var promise = $http.get('js/products.json').then(function(response){

            // Return the data which can be called inside the .then(DATA)
            return response.data;
        });

        // Return the promise
        return promise;
    }
}]);

Then edit your controller to this:

app.directive('phoneList',[function(){
    return {
        restrict: 'E',
        templateUrl: 'phone-list.html',
        controller: ['$http', '$scope', 'DataService', function($http, $scope, DataService){

            // Handle the promise
            DataService.getData().then( function(response) {
                $scope.products = response;
                console.log($scope.products)
            });
        }],
        controllerAs: 'homeCtrl'
    };
}]);

edited Sep 11, 2017 at 11:45

answered Sep 11, 2017 at 11:35

Red

7,43310 gold badges53 silver badges98 bronze badges

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

8 Comments

Mohit Sharma Over a year ago

Updated the code with your suggestion. Still it is showing undefined error. My AngularJS version is 1.6.4. Does that have anything to do with it?

Red Over a year ago

Copy and paste the error. So I can see what error you get. If just showing undefined. Then do console.log(response) inside your service getData(). Then check if it logs data there.

Red Over a year ago

@MohitSharma Perhaps create a fiddle. So I can play with it. Right now, there is to less code to give more suggestions.

Red Over a year ago

Console.log(response) inside the controller the .then() function. Not outside the .then() but inside!. What is it showing you?

Red Over a year ago

I only get alot of errors. Please update without having errors. Thanks!

|

Vignesh · Accepted Answer · 2017-09-11 11:46:52Z

0

try returning the object after its available from url

app.service('DataService', ['$http', function($http){
    this.getData = function(){
        var data = $http.get('js/products.json').then(function(response){
            return response.data;
        });
       if(data)
        return data;
    }}]);

answered Sep 11, 2017 at 11:46

Vignesh

1,2221 gold badge10 silver badges17 bronze badges

1 Comment

Red Over a year ago

if(data) will return false if the $http request takes some time.

Collectives™ on Stack Overflow

Service Data Undefined in Controller AngularJS

2 Answers 2

8 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Related