AngularJS $http request in a factory

Question

I want to load a JSON file into a factory and then return its value.

Here's the code:

angular.module('getGuilds', [])
    .factory('getGuilds', getGuilds);

getGuilds.$inject = ['$http'];

function getGuilds($http){
    var obj = {content:null};

    $http.get('guild/guilds.json').success(function(data) {
        obj.content = data;
    });

    return obj;
}

The problem is that it only returns the object with the value of null, so it seems the $http.get doesn't change the value of the obj.content.

After this I did a little test:

    $http.get('guild/guilds.json').success(function(data) {
        obj.content = data;
    });

    console.log(obj)
    return obj;
}

It gave back this object insted of the JSON's array: {content:null}.

Then I put the console.log inside the $http.get request.

$http.get('guild/guilds.json').success(function(data) {
     obj.content = data;
     console.log(obj)
});

Guess what, it logged out the JSON file. Would somebody be so kind as to help me?

danh · Accepted Answer · 2015-02-23 18:24:14Z

3

$http.get performs the get asynchronously. The code that appears after the success block in the source runs before the code within the success block. So it's behaving just as expected: on your first attempt, you're logging the results of an unfinished request.

answered Feb 23, 2015 at 18:24

danh

62.7k10 gold badges100 silver badges139 bronze badges

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

Comments

Daniël Smink · Accepted Answer · 2015-02-23 18:48:35Z

This is because $http.get performs the get asynchronously. So at the point you were assigning the value, it wasn't available yet. You need to return the obj inside your success function changing your code like this should make it work:

// dataservice factory
angular
 .module('getGuilds', [])
 .factory('dataservice', dataservice);

dataservice.$inject = ['$http'];

function dataservice($http) {
    return {
      getGuilds: getGuilds
    };

    function getGuilds() {
       return $http.get('guild/guilds.json')
        .then(getGuildsComplete)
        .catch(getGuildsFailed);

       function getGuildsComplete(response) {
        return response.data;
       }

       function getGuildsFailed(error) {
         console.log('XHR Failed for getGuilds.' + error.data);
       }
    }
}

In your controller you would then call the dataservice:

dataservice.getGuilds()
  .then(function(data) {
    vm.guilds = data;
    return vm.guilds;
  });

Obviously the controller requires more code to actually work. But this should give you enough info to solve your issue.

Collectives™ on Stack Overflow

AngularJS $http request in a factory

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related