Returning data from Service to controller

Question

Been spinning in circles on this and would appreciate any help. Trying to pull data from api in service into my controller and repeat the returned data in an ng-repeat.

Have tried to approaches with mixed results.

Approach 1:

Factory

app.factory('getServiceData',function($http){
var getPosts = function(){
  return $http.get("http://localhost:3000/posts")
    .then(function(response){
      console.log(response.data)
      return response.data
    })
}

Controller

app.controller('myCtrl',['getServiceData','$scope','$http', 
function($scope,$http,getServiceData){

getServiceData.getPosts().then(function(data){
  $scope.posts = data;
}).catch(function(){
  $scope.error ='unable to get posts';
});

My console returns "Provider 'getServiceData' must return a value from $get factory method." So my promise isn't returning a get value that I can use, but not sure how to refactor.

Approach 2 is using resolve on the ngRoutes to pull the api data before the user navigates to the page

Approach 2:

app.factory('getServiceData',function($http){

return {
  var getPosts = function(){
  return $http.get("http://localhost:3000/posts")
 .then(function(response){
  console.log(response.data)

return response.data
  })
 }
};

Config:

.when('/home.html', {
        templateUrl: 'app/home.html',
        controller: 'myCtrl',
        resolve: {
         'ServiceData': function(getServiceData){
           return getServiceData.getPosts();
             }
           }

    })

The second approach will return the data from my api on the console.log response but I am unable to display it within my controller.

score 2 · Answer 1 · answered Jun 02 '17 at 05:26

2

you don't need to resolve the promise in the factory since you are resloving it in the controller. just return the http in the factory and resolve in the controller.

Also, return the endpoints object in the factory

app.factory('getServiceData',function($http){
    var getPosts = function(){
      return $http.get("http://localhost:3000/posts")
    }
    return {
        getPosts : getPosts 
    }

})

answered Jun 02 '17 at 05:26

Sachila Ranawaka

39,756
7
56
80

Tried doing this but I'm getting a return that getServiceData.getPosts is not a function. Still new to angular and services – Christopher Clark Jun 02 '17 at 05:42

score 1 · Answer 2 · answered Jun 02 '17 at 05:51

1

It should be like to this.

app.factory('getServiceData', function($http){
  return {
    getPosts : function() {
        return $http.get("http://localhost:3000/posts")
       }
     };
});

answered Jun 02 '17 at 05:51

Hadi J

16,989
4
36
62

score 0 · Answer 3 · answered Jun 02 '17 at 05:24

Approach 1 should be like this:

It should return the getPosts object for controller to understand, hence the error "Provider 'getServiceData' must return a value from $get factory method." would be resolved.

app.factory('getServiceData',function($http) {
    var getServiceDataFactory = {};
    var _getPosts = function() {
        return $http.get("http://localhost:3000/posts")
                    .then(function(response){
                        console.log(response.data);
                        return response.data;
                    });
    }

    getServiceDataFactory.getPosts = _getPosts;
    return getServiceDataFactory;
});

score 0 · Accepted Answer · answered Jun 02 '17 at 05:55

Refactored your Approach #1
The first problem was your service and how it was coded.
The second problem was your controller's order of dependency injection.

//Service
app.factory('getServiceData', getServiceData);
getServiceData.$inject = ['$http'];
function getServiceData($http) {
  return {
    getPosts: () => $http.get('http://localhost:3000/posts')
  }
});

// Controller
app.controller('myCtr', myCtrl);
myCtrl.$inject = ['getServiceData', '$scope'];
function myCtrl(getServiceData,$scope) {
  getServiceData.getPosts().then(function(data){
    $scope.posts = data;
  }).catch(function(){
    $scope.error ='unable to get posts';
  });
}

Helpful references:

AngularJS: Factory vs Service vs Provider

Dependency Injection

This was it. I had my dependencies listed in the wrong order. Thanks!! — Christopher Clark, Jun 02 '17 at 15:54

Returning data from Service to controller

4 Answers4