AngularJS $http request inside service

Question

I'm trying to get some data from a Service into a Controller and I keep get an undefined variable.

angular
    .module("classes")
    .service("MyService", function ($http) {

        this.foo;
        $http.get("/classes/all").then(function (response) {
            this.fighters = response.data;
            this.foo = this.fighters;
            console.log(this.foo);
        });
        console.log(this.foo);

    })

When I run this I get on the console, by this order, line 11 is undefined and then line 9 returns me the array.

And when in the controller I try to get the variable foo, it also says undefined.

$scope.fooFighters = MyService.foo;

Vivz · Accepted Answer · 2017-09-21 11:17:13Z

6

The reason is because of asynchronous execution of your API call. I would suggest you to rewrite the code to use a factory that will return a promise object. No need to bring unnecessary variables.

angular.module("classes").factory("MyService", function($http) {
    return {
        fighters: function() {
            return $http.get("/classes/all").then(function(response) {
                return response.data;
            });
        }
    }
})

And in your controller, you can get the value by injecting the service in the controller and then by referencing it like

 MyService.fighters().then(function(data){
   $scope.fooFighters = data;
  });

edited Sep 21, 2017 at 11:17

answered Sep 21, 2017 at 10:46

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

8 Comments

N.Car Over a year ago

if add console.log($scope.fooFighters); right after in the controller. I get first undefined for the variable in the controller and then I get the array from the service console.log(this.fighters);

Vivz Over a year ago

Try the above code. Change your service to a factory to return a promise object.

N.Car Over a year ago

I jus tried it. it keeps logging "undefined" on the console

Vivz Over a year ago

Where are you printing $scope.fooFighters? You should put console inside then

N.Car Over a year ago

Ohhh!! Ir has to be inside of MyService.fighters ()?so the whole controller depending on that service will have to inside of that too. Is this a good practice?

|

Sudipta Mandal · Accepted Answer · 2017-09-21 10:44:41Z

0

because it will take some time to load the ajax/http request data after that line 9 will work. So if you want to work with ajax/http data then you should write code/function inside

$http.get("/classes/all").then(function (response) {
        // do something
    });

answered Sep 21, 2017 at 10:44

Sudipta Mandal

2451 silver badge4 bronze badges

1 Comment

N.Car Over a year ago

The problem is If I want to access it in the controller. It will only do the http after running the controller

Collectives™ on Stack Overflow

AngularJS $http request inside service

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related