CODEWITHSUNDEEP
javascriptangularjsrest
Mohamed NAOUALI
Mohamed NAOUALI

Reputation: 2132

Why I'm getting the var undefined

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: "[email protected]",    password: "password", userProfile: Object}
ligne 2:  JavaScript
ligne 2:  Object {id: "1", username: "User1", email: "[email protected]", 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?

Upvotes: 0

Views: 95

Answers (4)

Mohamed NAOUALI
Mohamed NAOUALI

Reputation: 2132

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

Upvotes: 0

Mohamed NAOUALI
Mohamed NAOUALI

Reputation: 2132

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075209

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.

Upvotes: 2

Douglas
Douglas

Reputation: 37771

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.

Upvotes: 0

Related Questions