AngularJS, how do I use a service to capture HTTP data and bind it to my controller?

Question

I have an API call that's working great, but I'd like to use it on several controllers so I moved it to it's own service. I'm running into what looks like a classic Scope issue or a misunderstanding of Angular's digest cycle.

'use strict';
myApp.factory('Stuff',['$http', function ($http) {
  var Stuff = {};
  Stuff.data = {};
  Stuff.api = 'http://localhost:8080/api/';
  Stuff.getStuff = function() {
    var http_stuff_config = {
      method: 'GET',
      url: Stuff.api + 'stuff/'
    };
    $http(http_stuff_config).then(function successCallback(response) {
      Stuff.data = (response.data);
      console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) {
      console.log(response.statusText);
    });
  };
  Stuff.getStuff();
  console.log(Stuff.data); // Returns empty object.
  return Stuff;
}]);

myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
  $scope.stuff = Stuff;
  console.log($scope.stuff.data); // Returns empty object.
  $scope.stuff.getJobs();
  console.log($scope.stuff.data); // Returns empty object.
}]);

Here's the big clue. The essential output of above, in order is...

empty object (in service after calling method)
empty object (in controller before calling method)
empty object (in controller after calling method)
populated object (in method execution from service)
populated object (in method execution from controller)

So somewhere between the scope of the getStuff() method and Angular's order of operations, I'm doing something remarkably foolish. Thank you in advance.

did you mean to capture $http data?

Ji_in_coding
– Ji_in_coding

2016-07-19 20:12:10 +00:00
Commented Jul 19, 2016 at 20:12 — Ji_in_coding
– Ji_in_coding, Commented Jul 19, 2016 at 20:12

gh9 · Accepted Answer · 2016-07-19 20:27:32Z

You need to add returns on your service, or else the promise will not be returned to the controller. It is not good practice to just store the returns in your services AND NOT return the result to the controller.

This is considered bad practice because, any time you update the data on the service everyone will need to apply $scope.$watch to the service to look for updates. This can be very expensive in large scale apps.

The best Idea is to return the data to the calling controller (if you do not need to cache it, this we can talk about later) and let the controller access it via the promise service.getthing().then(function(result){});

myApp.factory('Stuff',['$http', function ($http) {
  var Stuff = {};
  Stuff.data = {};
  Stuff.api = 'http://localhost:8080/api/';
  Stuff.getStuff = function() {
    var http_stuff_config = {
      method: 'GET',
      url: Stuff.api + 'stuff/'
    };
    return $http(http_stuff_config).then(function successCallback(response) {
      return response.data;
      console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) {
      console.log(response.statusText);
    });
  };
  Stuff.getStuff();
  console.log(Stuff.data); // Returns empty object.
  return Stuff;
}]);




myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
  $scope.stuff = Stuff;
  console.log($scope.stuff.data); // Returns empty object.
  $scope.stuff.getJobs().then(function(result) {$scope.stuff = result; console.log(result);});
  console.log($scope.stuff.data); // Returns empty object.
}]);

user725844 · Accepted Answer · 2016-07-19 20:26:08Z

0

I recommend you not to store the result inside the service itself (Stuff.data). Just return your data in the getStuff function and let the appController's scope store the data instead.

answered Jul 19, 2016 at 20:26

user725844

Comments

Seth Trowbridge · Accepted Answer · 2016-07-19 20:33:50Z

0

remember that $scope.stuff.getJobs() is async

(meaning you can't actually call console.log($scope.stuff.data) on the next line and get the data)

Now if you had a view, with something like <span ng-bind="stuff.data.property"> you could see it work just fine because the view will update by itself when the async function is done. (this is part of angular)

edited Jul 19, 2016 at 20:33

answered Jul 19, 2016 at 20:25

Seth Trowbridge

952 silver badges9 bronze badges

Comments

Ji_in_coding · Accepted Answer · 2016-07-19 20:34:26Z

You need to understand that when you run $http, it is making an AJAX request. therefore it will not return an result immediately.

Therefore, if you attempt to use the data coming from $scope.stuff.getJobs(); immediate after invoking this function, you are likely to get nothing.

What you should do is to have your Stuff.getJobs() return a promise, and use promise.then(your own success handler) to correctly handle the returned response.

I have cleaned up your code a little bit. The following is a running sample of your code retrieving data from Yahoo Weather API.

You can play with it on CODEPEN.

html:

<div ng-app="myApp" ng-controller="appController">
  <p>{{data}}</p>
</div>

JS:

var myApp = angular.module("myApp", []);

myApp.factory('Stuff',['$http', function ($http) {
  var Stuff = {};
  Stuff.data = {};
  //sample yahoo weather api
  Stuff.api = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';

  Stuff.getData = function() {
    var http_stuff_config = {
      method: 'GET',
      url: Stuff.api + 'stuff/'
    };
    return $http(http_stuff_config);
  };

  return Stuff;
}]);

myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
  $scope.data = "$http service not ran";

  var uncompletedAjaxCall = Stuff.getData();
  uncompletedAjaxCall.then(
    function(responseData){
      $scope.data = responseData;
    }, 
    function(errorMsg){}
  );

}]);

Collectives™ on Stack Overflow

AngularJS, how do I use a service to capture HTTP data and bind it to my controller?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related