Function Returning Undefined AngularJS

Question

Below is my Controller Code:

///////
//Diary Notes Controller
///////
diary.controller('NotesController', ['$scope','$http', 'notesService', function ($scope, $http, notesService){

//
//Get the Notes data back from the Server
//

$scope.updateFunc = function () {

    var notes = notesService.getText();

    console.log(notes);

};

$scope.updateFunc();

And my Services Code:

diary.factory('notesService', function ($http) {

return {

    getText: function () {

        $http.get('www/getNotes.php')
            .then(
            function (payload){
                return payload.data;
            });

    }

}

});

Basically When I do console.log the controller returns undefined for the notes variable which seems awkward as when i was using the controller to get the payload it works but returning the payload from the services doesn't seems to work.

Oleksandr T. · Accepted Answer · 2015-02-11 08:56:44Z

2

$http.get is asynchronous function, that returns HttpPromise. There are couple ways how you can get data

1.Pass callback, like this

diary.factory('notesService', function($http) {
  return {
    getText: function (callback) {
      $http.get('www/getNotes.php')
      .then(
        function(payload) {
          callback(payload.data);
        });

    }
  }
});


notesService.getText(function (notes) {
  console.log(notes);
});

2.return promise

diary.factory('notesService', function($http) {
  return {
    getText: function () {
      return $http.get('www/getNotes.php');
    }
  }
});

notesService.getText().then(
    function(payload) {
        callback(payload.data);
    });

edited Feb 11, 2015 at 8:56

answered Feb 11, 2015 at 8:51

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

Miguel · Accepted Answer · 2018-03-28 23:39:10Z

2

You get undefined because you're not returning anything from getText(). Add a return statement before the $http call in your method:

getText: function () {
    return $http.get('www/getNotes.php')
        .then(function (payload) {
            return payload.data;
         });
}

Afterwards call the then method of the promise to get the value:

notesService.getText().then(function(notes) {
    console.log(notes);
});

edited Mar 28, 2018 at 23:39

answered Feb 11, 2015 at 8:50

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

2 Comments

ChanX Over a year ago

Thanks for the answer .. The return was what I needed to make it work.. Now it returning promise value in Controller .. :) Thank You

Alejandro Cumpa Over a year ago

You, sir, save my day.

Davin Tryon · Accepted Answer · 2015-02-11 08:51:15Z

1

$http.get returns a Promise.

Since the promise callback in then is async, you need to handle the promise in the controller. To do this, first return the promise in the factory:

return $http.get('www/getNotes.php')  <-- return added at the beginning of this line
.then(function (payload){
    return payload.data;
});

And then, handle the promise in the controller:

$scope.updateFunc = function () {   
    notesService.getText().then(function(notes) {     
        console.log(notes);
    });;
};

answered Feb 11, 2015 at 8:51

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

3 Comments

ChanX Over a year ago

Can promise be handled in factory instead of controller??

Davin Tryon Over a year ago

What do you mean by handled? It is async.

ChanX Over a year ago

I mean if I can process the returned values and add it into an array .etc

Davin Tryon · Accepted Answer · 2015-02-11 08:54:32Z

1

the problem is that you are not returning anything on the getText function. If you return the promise from the $http.get the you should implement any of the promise methods to fulfill your model variable notes

  diary.factory('notesService', function ($http) {

    return {

        getText: function () {

            return $http.get('www/getNotes.php')
                .then(
                function (payload){
                    return payload.data;
                });

             }

          }
   });

edited Feb 11, 2015 at 8:54

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

answered Feb 11, 2015 at 8:51

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Function Returning Undefined AngularJS

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related