Return value in Javascript but it turns out to be undefined

Question

I'm new at Javascripts and i'm trying to use Angular UI route, here is my code

myApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {     
    $stateProvider  
        .state('home', {
            url: '/test',
            templateUrl: '/custom.html'
        })
        .state('detail', {                
            url: '/{examID}',              
            views: {
            '': {
              templateUrl: '/templates/customize.html',
               controller: ['$scope', '$stateParams', 'utils',

                function ( $scope,$stateParams,utils) {
                  $scope.exam = utils.findById($stateParams.examID);
                  console.log('exam is ' + $scope.exam );
                }
                ]
        }            
            }
        }     )    

    }])

and this is the service which has findbyID function

angular.module('service', [])
.factory('utils', function ( $http) {
  return {
    findById: function findById(id) {
       $http.get('/api/exams/' + id).success(function(response) {
            return response;
    })}
};});

i've already follwed this topic but $scope.exam still undefined

How to return value from an asynchronous callback function?

PS. i've tried to print out response and it's an object

Thx

score 1 · Accepted Answer · answered Jul 15 '15 at 05:46

This is a place where a lot of developers new to JavaScript stumble.

What is going on here is that you are assigning the return value of utils.findById() to $scope.exam. The problem is that utils.findById() doesn't actually return anything. (When a function doesn't have an explicit return statement in JavaScript, the return value is implicitly undefined.)

Here is what your service should look like:

angular
  .module('service', [])
  .factory('utils', function ($http) {
    return {
      findById: function (id) {
        return $http.get('/api/exams/' + id);
      }
    };
  });

You probably noticed that the call to .success() has disappeared too! Don't worry. It just moved.

Instead of calling .success() on $http.get(), we want to call it on utils.findById(). Doing this will give you access to the response variable in your controller. Because you will have access to the response variable, you will be able to assign response to $scope.exam like so:

.state('detail', {
  url: '/{examID}',
  views: {
    '': {
      templateUrl: '/templates/customize.html',
      controller: ['$scope', '$stateParams', 'utils',
        function ($scope, $stateParams, utils) {
          utils.findById($stateParams.examID)
            .success(function (response) {
              $scope.exam = response;
            });
        }
      ]
    }
  }
});

Hopefully that cleared it up. If I haven't been clear on anything, please let me know so I can update this answer.

Yay! :D Glad I could help. – James Brewer Jul 15 '15 at 18:49 — James Brewer, Jul 15 '15 at 18:49

score 0 · Answer 2 · answered Jul 15 '15 at 05:43

You have to wait for the ajax call to finish. Modify the code in your controller to:

$scope.exam;
utils.findById($stateParams.examID).then(function(data) {
    $scope.exam = data.data;
}

Read about the concept of 'Promises' in AngularJS and JavaScript.

score 0 · Answer 3 · edited Jul 15 '15 at 06:12

Use deferred promise, So that it would return value after response

Service:

angular.module('service', [])
.factory('utils', function ( $http) {
  return {
    findById: function findById(id) {
       var promise=$http.get('/api/exams/' + id);
   return promise;
};});

Controller:

   myApp.config(['$stateProvider', 
  '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {     
            $stateProvider  
                .state('home', {
                    url: '/test',
                    templateUrl: '/custom.html'
                })
                .state('detail', {                
                    url: '/{examID}',              
                    views: {
                    '': {
                      templateUrl: '/templates/customize.html',
                       controller: ['$scope', '$stateParams', 'utils',

                        function ($scope, $stateParams, utils) {
                                                   utils.findById($stateParams.examID).then(function(value) {
                        $scope.exam = value;
                        console.log('exam is ' + $scope.exam );
                         });

                        }
                        ]
                       }           
                    }
                })    
        }])

Return value in Javascript but it turns out to be undefined

3 Answers3