Angular Service returning "undefined"

Question

So I am sure I am not using best practices, but, I'm just trying to get this to work. I'm making a note taking app, and for whatever reason, the service I created, returns undefined and I can't figure out why.

Here's the service:

angular.module('notesService', []).factory('Notes', ['$http', function($http){
    return {
        get : function(){
            var notes = $http.get('/api/notes');
            return notes;
        }
    }
}]);

And here is the controller:

angular.module('mainController', [])
    .controller('mainController', function($scope, Notes){
        console.log(Notes.get());
    });

The controller is not producing anything on the page just yet, i'm still testing.

Here is what the service returns to my controller:

e {
   $$state : {
      status : 1,
      value : {
           config : Object,
           data: Array[10]
        }
    }
}

This isn't the entire thing, but it is all the stuff I need for my purposes.

Whenever I access $$state.value it returns undefined and I have no idea why.

Oh, um. I'm not 100% sure. It looks like the object that my .get() function returns. The odd thing, is that I can access $$state in the service by using notes.$$state but anything below that i can't access. — Carson
– Carson, Commented Feb 5, 2017 at 16:19
Notes.get().then (function (data){ //the data is what you are looking for}); That get () method is actually returning a promise, which when resolved you will get the data returned from the api — Developer
– Developer, Commented Feb 5, 2017 at 16:21
I thought of that :/ I get this as the error: TypeError: Notes.get(...).then is not a function — Carson
– Carson, Commented Feb 5, 2017 at 16:23
You have the service in an entirely different module. So you gotta inject notesService into angular.module('mainController', [notesService]). You dont need to add new module for each controller and services, you can have single module and add everything to it — Developer
– Developer, Commented Feb 5, 2017 at 16:28

Developer · Accepted Answer · 2017-02-05 16:31:43Z

2

You have the service in an entirely different module. So you gotta inject notesService into angular.module('mainController', [notesService]).

You dont ideally need to add new module for each controller and services, you can have single module and add everything to it

answered Feb 5, 2017 at 16:31

Developer

6,4703 gold badges20 silver badges24 bronze badges

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

Comments

Merlin · Accepted Answer · 2017-02-05 16:31:14Z

0

$http return a promise see documentation for $http Also there is no need of the empty array in the angular.module parameter [] this might be what causes the error see in console.

angular.module('notesService').factory('Notes', ['$http', function($http){
    return {
        get : function(){
            return $http.get('/api/notes');
        }
    }
}]);


angular.module('mainController')
    .controller('mainController', function($scope, Notes){
        Notes.get().then(function(result){
            console.log(result);
        })
    });

edited Feb 5, 2017 at 16:31

answered Feb 5, 2017 at 16:25

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Comments

faizal vasaya · Accepted Answer · 2017-02-05 17:04:58Z

I created an application that will help you to learn the best practices, plus solve your current problem.

//--In app.module.js--//
angular.module('notesApp', []);

//-- In app.controller.js--//
angular.module('notesApp')
  .controller('MainController', ['$scope', '$http', '$log', 'notesFactory',
    function($scope, $http, $log, notesFactory) {
      $scope.data = {};
      notesFactory.getData('http://localhost:3000/api/notes', 'GET')
        .then(function(response) {
          $log.log(response.data);
        }, function(error) {
          $scope.data = error;
        });
    }
  ]);

//--In app.service.js --//
angular.module('notesApp')
  .factory('notesFactory', ['$http',
    function($http) {
      var notesService = {};
      notesService.getData = function(url, method) {
        return $http({
          url: url,
          method: method
        });
      }
      return notesService;
    }
  ]);

<html ng-app='notesApp'>

<head>
  <title>
    Notes Application
  </title>
</head>

<body>
  <div ng-controller='MainController'>
    <pre>{{ data | json}}</pre>
  </div>



  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js'></script>
  <script src='app.module.js'></script>
  <script src='app.controller.js'></script>
  <script src='app.service.js'></script>
</body>

</html>

Check the console for the json object as shown in the screenshot

Collectives™ on Stack Overflow

Angular Service returning "undefined"

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related