AngularJS : returning data from service to controller

Question

I am trying to create a service to get json and pass it to me homeCtrl I can get the data but when a pass it to my homeCtrl it always returns undefined. Im stuck.

My Service:

var myService = angular.module("xo").factory("myService", ['$http', function($http){
  return{
    getResponders: (function(response){
      $http.get('myUrl').then(function(response){
         console.log("coming from servicejs", response.data);
      });
    })()
  };
  return myService;
  }
]);

My Home Controller:

var homeCtrl = angular.module("xo").controller("homeCtrl", ["$rootScope", "$scope", "$http", "myService",
function ($rootScope, $scope, $http, myService) {
 $scope.goData = function(){
     $scope.gotData = myService.getResponders;
 };
 console.log("my service is running", $scope.goData, myService);
}]);

Pankaj Parkar · Accepted Answer · 2017-05-12 06:55:39Z

20

You should return promise from getResponders function, & when it gets resolved it should return response.data from that function.

Factory

var myService = angular.module("xo").factory("myService", ['$http', function($http) {
    return {
        getResponders: function() {    
            return $http.get('myUrl')
            .then(function(response) {
                console.log("coming from servicejs", response.data);
                //return data when promise resolved
                //that would help you to continue promise chain.
                return response.data;
            });
        }
    };
}]);

Also inside your controller you should call the factory function and use .then function to get call it when the getResponders service function resolves the $http.get call and assign the data to $scope.gotData

Code

 $scope.goData = function(){
     myService.getResponders.then(function(data){
          $scope.gotData = data;
     });

 };

edited May 12, 2017 at 6:55

answered Aug 21, 2015 at 19:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Karan Kapoor Over a year ago

What if I wanted $scope.goData to return data? Because if I init another variable inside $scope.goData and then make it equal to data or $scope.gotData, it would have been returned before it gets the valye

wsfuller Over a year ago

Not sure how this answer works, have used it and nothing is being returned into the controller Gist

Pankaj Parkar Over a year ago

Hey mate, thanks for heads up.. I corrected my code now.. please check updated

Community · Accepted Answer · 2016-03-09 07:10:57Z

This is an example how I did for my project, it work fine for me

var biblionum = angular.module('biblioApp', []);//your app
biblionum.service('CategorieService', function($http) {


    this.getAll = function() {

        return $http({
            method: 'GET',
            url: 'ouvrage?action=getcategorie',
            // pass in data as strings
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}  // set the headers so angular passing info as form data (not request payload)
        })
                .then(function(data) {

                    return data;


                })


    }


});

biblionum.controller('libraryController', function($scope,CategorieService) {
  
    var cat = CategorieService.getAll();
    cat.then(function(data) {
        $scope.categories = data.data;//don't forget "this" in the service
    })

  });

Collectives™ on Stack Overflow

AngularJS : returning data from service to controller

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related