angular using $http in factory

Question

I seem to be having an issue sending json from my factory out to controllers

Here is my factory

 .factory("UserService", function($http) {
var LevelsHere;
$http.get("/assets/images/generated.json").success(function(data){
    LevelsHere = data;
    return LevelsHere;
});


    return {
        all: function() {
          return LevelsHere;
        },
        first: function() {
          return LevelsHere[0];
        }
      };
})

I am simply trying to send the json object out (or bits of it) with this factory. I can console.log inside the http get and it seems to be grabbing the json just fine. I seem to have hit a wall, any help would be much appreciated. I would just like the all ad first functions to be working. thanks!

I first had success by hard coding the levelsHere above it with the json string like var levelsHere = [{"stuff in here"}], but when i moved it over to an $http it doesn't work.

Aditya Singh · Accepted Answer · 2014-08-26 17:34:38Z

5

Since you don't have any $watch to look over the value returned from asynchronous $http.get request, the updated value is not available to the consumer. As $http.get request returns a promise, you can leverage the promise and update the value on success of the promise in then() as below:

var app = angular.module('app', [])
.factory("UserService", function($http) {
    var LevelsHere = $http.get("https://api.github.com/users/mralexgray/repos")
               .success(function(data){
                 return data;
               });
    return {
        all: function() {
          return LevelsHere;
        }
      };
})  
.controller('controller', function(UserService, $scope){
    UserService.all().then(function(data){
        $scope.value = data;    
    });
})

DEMO

answered Aug 26, 2014 at 17:34

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

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

Comments

ABOS · Accepted Answer · 2014-08-26 17:18:38Z

0

What is not working exactly? My guess is that you got undefined immediately after this factory method, since $http uses deferred object

answered Aug 26, 2014 at 17:18

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Comments

Mark · Accepted Answer · 2014-08-26 17:19:00Z

0

You are returning LevelsHere before the async call is finished. The order of your operation goes:

call http.get
return all and first which return LevelsHere (even though the http request has not finished)
http get returns json
success call back fires returning LevelsHere to nobody.

A better way is to just return the promise:

return $http.get("/assets/images/generated.json")

then in your controller you can get the value from the promise by calling the success function. If you try to resolve the promise in the factory and return the value, your controller will try to use the value before it's returned from the server.

var promise = UserService()
promise.success(function(data){
// do something with data
}

answered Aug 26, 2014 at 17:19

Mark

92.6k8 gold badges116 silver badges156 bronze badges

2 Comments

ajmajmajma Over a year ago

thank you for the answer, putting the promise in the controller is giving me an error of "Unexpected token var". Any thoughts?

Mark Over a year ago

That sounds like a syntax error. Obviously var is okay in javascipt. Maybe you left some open parenthesis or brackets?

Collectives™ on Stack Overflow

angular using $http in factory

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related