how to use factory in controller angularjs

Question

I am trying to create factory and use it in the controller, the factory return data from get method and save it in the controller but its not working, and $scope.myData return undefind.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, myService) {
    $scope.myData = myService.getEvent();
});
app.factory('myService', function($http){
    var oGetData = {};
    oGetData.getEvent = function(){
        $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival')
        .then(function(response) {
         return response.data.event;
        });
    };

    return oGetData ;
});

when i use factory code directly in the controller its work fine

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival')
        .then(function(response) {
            $scope.myData = response.data.event;
        });
});

can someone tell me what i did wrong in the first code please?

here is the codepen http://codepen.io/anon/pen/NRVZdE

Pop-A-Stash · Accepted Answer · 2016-10-28 21:59:49Z

1

Working Codepen: http://codepen.io/jdoyle/pen/KgLjgY

This is a commonly asked question. You are expecting this to return data, but it does not:

app.controller('myCtrl', function($scope, myService) {
    $scope.myData = myService.getEvent();
});

getEvent() returns a promise, not data. You need to treat the return object just like you would a call to $http:

app.controller('myCtrl', function($scope, myService) {
    myService.getEvent().then(function(response){
      $scope.myData = response.data.event;
    });
});

And in your factory just return the call to $http and nothing else:

oGetData.getEvent = function(){
    return $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival');
};

If you want to modify the data before it comes back to the controller, you can create your own deferred and handle the response yourself, like this:

oGetData.getEvent = function(){
    var deferred = $q.defer();
    $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival')
    .then(function(response) {
       deferred.resolve(response.data.event);
     });
    return deferred.promise;
};

Then you don't have to worry about getting the event from the response data:

app.controller('myCtrl', function($scope, myService) {
    myService.getEvent().then(function(event){
      $scope.myData = event;
    });
});

edited Oct 28, 2016 at 21:59

answered Oct 28, 2016 at 21:44

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

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

3 Comments

Ahmed Over a year ago

this code output error TypeError: Cannot read property 'then' of undefined

Pop-A-Stash Over a year ago

Which line is it referring to? Do you have a plunkr or Codepen to look at?

Pop-A-Stash Over a year ago

You forgot to inject $q as a dependency in your factory. I should have mentioned that

Collectives™ on Stack Overflow

how to use factory in controller angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related