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.

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.

• javascript
• angularjs

Share Improve this question Follow asked Feb 11, 2015 at 8:46 ChanXChanX 37233 gold badges1010 silver badges2626 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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);
    });

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

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

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

             }

          }
   });