Why I'm getting the var undefined

Question

I'm trying to get a Rest array and then display it on my HTML. the problem that I'm facing is that In My factory I'm able to get the array and display it's content, but not in my controller where I'm always getting the Undefined var. here is my Factory

.factory('coursesService', function($resource) {
                var service = {};
                service.getAllCouses = function (){
                    var Courses = $resource("/myproject/rest/training/trainings");
                    var data = Courses.query().$promise.then(function(data)
                            {
                        service.data= data;
                        console.log("ligne 1: ", service.data[0].name);
                        console.log("ligne 1: ", service.data[0].creator);
                        console.log("ligne 2: ", data[1].name);
                        console.log("ligne 2: ", data[1].creator);
                        return service.data;
                            }); 
                }
                return service;
            })

and my controller

.controller("CoursesController",
            function CoursesController($scope, coursesService) {
                var courses = {};
                courses = coursesService.getAllCouses();
                console.log("courses: ", courses);
            })

as results I'm getting this:

courses:  undefined
ligne 1:  Angular
ligne 1:  Object {id: "1", username: "User1", email: "user1@gmail.com",    password: "password", userProfile: Object}
ligne 2:  JavaScript
ligne 2:  Object {id: "1", username: "User1", email: "user1@gmail.com", password: "password", userProfile: Object}

Why I'm getting courses: undefined? and Shouldn't be displayed after the list that I'm displaying in the factory?

And because it's asynchronous so the data is not available at return time. You should probably read [this possible duplicate question](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) about returning data from an asynchronous operation. There are all sorts of things wrong with this code - most having to do with the async nature of the operation. — jfriend00, Jun 15 '15 at 21:18
@jfriend00 yes, the link iv very helpful, I'm now getting a return from the function. I updated the factory based on this [link](http://andyshora.com/promises-angularjs-explained-as-cartoon.html). but I'm now facing an issue with how to handle the data received in the controller that has this format `d {$$state: Object}` — Mohamed NAOUALI, Jun 18 '15 at 12:32

score 2 · Answer 1 · answered Jun 15 '15 at 21:16

Your getAllCouses function never returns anything, and so calling it always results in undefined. The callback to the query promise then handler returns something, but not getAllCouses.

You'll need to have getAllCouses return the promise, and then use the result from within a then handler on that promise. You can't just use its return value directly, not if Courses.query() is async (and if it isn't, why is it returning a promise?).

That would look something like this:

.factory('coursesService', function($resource) {
    var service = {};
    service.getAllCouses = function (){
        var Courses = $resource("/myproject/rest/training/trainings");
        var data = Courses.query().$promise.then(function(data) {
            service.data= data;
            console.log("ligne 1: ", service.data[0].name);
            console.log("ligne 1: ", service.data[0].creator);
            console.log("ligne 2: ", data[1].name);
            console.log("ligne 2: ", data[1].creator);
            return service.data;
        }); 
        return data;        // <=== Return the promise (`data` is a bit of a suspect name)
    };
    return service;
})

Then:

.controller("CoursesController", function CoursesController($scope, coursesService) {
    coursesService.getAllCouses().then(function(courses) {   // <=== Use the promise
        console.log("courses: ", courses);                   // <===
    });                                                      // <===
})

...but I'm not an Angular guy.

score 0 · Answer 2 · answered Jun 15 '15 at 21:16

0

getAllCouses() does not return a value, it just sets two local variables, Courses and data.

The Courses.query promise only resolves once the web request is complete, so those logs are delayed.

answered Jun 15 '15 at 21:16

Douglas

36,802
9
76
89

score 0 · Answer 3 · answered Jun 21 '15 at 22:09

I fixed the issue by updating my service and controller like this:

.factory('coursesService', function($resource) {
        return $resource("/myproject/rest/training/trainings", {
            query : {
                method : "GET",
                isArray : true
            }
        });
    });

I just added the

isArray : true

and i updated the controller

.controller(
            "CoursesController",
            function UserController($scope, coursesService) {
                coursesService.query(function(data) {
                    console.info("data: ", data)
                    console.log("1st course: ", data[0].name)
                    $scope.Courses = data; 
                });

score 0 · Answer 4 · answered Nov 05 '15 at 09:45

I fix it simply in this way:

.factory('coursesService', function($resource) {
        return $resource("/myproject/rest/training/trainings")
    })

and the controller:

.controller("coursesController", function($scope, coursesService) {
        coursesService.query(function(data) {
            $scope.Courses = data;
        });
    })

Why I'm getting the var undefined

4 Answers4