using angular service to make $http calls

Question

I am trying to make a $http call from angular service and it doesn't seem to get reflected in the html

var heroSliderApp = angular.module('heroSliderApp', []);

heroSliderApp.service('heroService', function ($http) {
    this.loadSlider = function () {
        $http.get("some url that returns data")
            .then(function (response) {
                return JSON.stringify(response.data);
                //return "Hello World!"; //this doesn't work
            });
    };
});

heroSliderApp.controller('heroSliderController', function ($scope, $http, heroService) {
    $scope.sliderValue = heroService.loadSlider(); // this doesn't work
    $scope.someValue= "Testing"; //this works
});

Here the .then function gets called and response.data contains value, but the value is not getting reflected in the html

Did you verify that your service succeeds ? .then() is not called if $http.get fails. — nos
– nos, Commented Dec 12, 2017 at 7:25
Your service doesn't return anything to your controller, so $scope.sliderValue is undefined.You need to return the promise from the service: return $http.get..., and you need to use the returned promise in the controller: heroService.loadSlider().then(...). Why are you stringifying the object stored in the data of the response? — JB Nizet
– JB Nizet, Commented Dec 12, 2017 at 7:30
I was just playing around. I thought the value is not getting displayed since response.data is an object and hence tried stringify. Anyway returning $http.get works :) thanks — Vignesh Subramanian
– Vignesh Subramanian, Commented Dec 12, 2017 at 7:42

R.Anandan · Accepted Answer · 2017-12-12 07:41:24Z

1

try this

  this.loadSlider = function () {
      return $http.get("some url that returns data")
            .then(function (response) {
                return JSON.stringify(response.data);
                //return "Hello World!"; //even this doesn't work!
            });
    };

  heroService.loadSlider ().then(function(d) {
    $scope.sliderValue = d;
  });

edited Dec 12, 2017 at 7:41

answered Dec 12, 2017 at 7:36

R.Anandan

3425 silver badges19 bronze badges

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

2 Comments

JB Nizet Over a year ago

Again, that will throw. The service needs to return the promise.

R.Anandan Over a year ago

try it now and let me now

Vignesh Subramanian · Accepted Answer · 2017-12-12 07:43:46Z

1

Ok so I modified according to the comments from @JB Nizet and it seem to work

var heroSliderApp = angular.module('heroSliderApp', []);

heroSliderApp.service('heroService', function ($http) {
    this.loadSlider = function () {
        return $http.get("some url here");
    };
});

heroSliderApp.controller('heroSliderController', function ($scope, $http, heroService) {
    $scope.sliderValue = "";
    heroService.loadSlider().then(function (response) {
        $scope.sliderValue = response;
    });
});

edited Dec 12, 2017 at 7:43

answered Dec 12, 2017 at 7:38

Vignesh Subramanian

7,31915 gold badges98 silver badges161 bronze badges

Comments

Nitheesh · Accepted Answer · 2017-12-12 07:43:10Z

-1

Change your service like

heroSliderApp.service('heroService', function ($http) {
    this.loadSlider = function () {
        $http.get("some url that returns data")
            .success(function (response) {
                return JSON.stringify(response.data);
                //return "Hello World!"; //even this doesn't work!
            }).error(function {
                 //Erro handler
            });
    };
});

and controller like

heroService.loadSlider().then(function(response) {
   $scope.sliderValue = response;
})

Now the service will return a promise and the controller will receive it. When the controller data receives the response from service, the data will be binded in your controller variable.

edited Dec 12, 2017 at 7:43

answered Dec 12, 2017 at 7:40

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

1 Comment

JB Nizet Over a year ago

Again, that will throw. You may not call then() on undefined. The service must return a promise. success() and error() are deprecated since 1.4, and don't exist in 1.6.

Collectives™ on Stack Overflow

using angular service to make $http calls

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related