Angular JS: importing JSON data with $http.get() - works in controller, does not in a service - WHY?

Question

I'm trying to import JSON data into an angularJS application. I split my app into a controller and the import-service, but both in different files. I'm also using bower, grunt and yeoman (that's due to work, I'm not quite used to these, maybe there's also a problem.)

The strange behavior is:

I wanted to retrieve the JSON data with a $http.get() and resolve it - all within a service, so that I can hand out the data object from there to the main controller and won't have to resolve it there. Strangely, I didn't get any data, it was empty or not readable. Then I handed out the promise which I the $http.get() mehtod gives back and resolved it in the controller. That's not what I wanted, but now it works.... but why?

I guess it's a schmall misstake somehwere but neither me nor my team members can find one. Strangely, doing a little test-app without grunt, yeoman and bower it worked.

I'd appreciate every hint or idea... Jana

Here's my code from the NOT working version, first the main module with controller:

/** Main module of the application. */
(function () {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = CategoryFactory.getCategories();
      $scope.subcategories = CategoryFactory.getSubCategories();

    }
  );
})();

Service-part:

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var categories = [];
      var subcategories = [];

      $http.get("../mockdata/categories.json").then(function (response) {
        categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        subcategories = response.data;
      })
      return {
        getCategories: function(){
          return categories;
        },
        getSubCategories: function(){
          return subcategories;
        }
      }
    }
  );
})();

Here's my code from the WORKING version, first the main module with controller:

/** Main module of the application. */
(function() {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = [];
      $scope.subcategories = [];

      CategoryFactory.getCategories().then(function(response) {
        $scope.categories = response.data;
      });
      CategoryFactory.getSubCategories().then(function(response) {
        $scope.subcategories = response.data;
      });
    }
  );
}
)();

Service-part:

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http, $q) {

      var categoryURL = "../mockdata/categories.json";
      var subcategoryURL = '../mockdata/subcategories.json';

      function getSubCategories() {
        return $http.get(subcategoryURL);
      }
      function getCategories() {
        return $http.get(categoryURL);
      }
      return {
        getCategories: getCategories,
        getSubCategories: getSubCategories
      }
    }
  );
})();

Mathew Berg · Accepted Answer · 2014-11-17 13:04:21Z

2

This is destroying your reference, so loop over the data from the server and push it into the variables you need:

  $http.get("../mockdata/categories.json").then(function (response) {
    for(var x = 0; x < response.data.length; x++){
        categories.push(response.data[x]);
    }
  });

edited Nov 17, 2014 at 13:04

answered Nov 17, 2014 at 11:04

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

4 Comments

Jana Over a year ago

okay... I want to try this. But how do I iterate over an unknown object'smproperties and filling the categories with them? With for (var property in responseData) I only got an increasing index number alerting the property. And how do i add a property to the categories? The JSON data is like a list of objects which have several properties...

Jana Over a year ago

Thanks! It's really easy, my mind was a little blocked I think. AND it worked! very well. Thank you!

Jana Over a year ago

Still there is a question of understanding... why did it work when I resolved the promise in the controller? The code is the same as in my service (before correcting it), without any loop, but it worked fine. Do you know why? Is it just that it takes some milliseconds to be resolved and either passing it to the controller or looping over it is enough time for resolving? But why then isn't it "destroying the reference" in the controller?

Mathew Berg Over a year ago

Because it's the same reference in the controller as you're directly modifying the variables attached to the scope object. In your service the arrays are not attached to an object and therefore you obliterate them when you reset them after the http post.

Rabi · Accepted Answer · 2014-11-17 09:14:41Z

1

$http call is by default asynchronous.

So in your first version, when you write like $scope.categories = CategoryFactory.getCategories(); you get empty categories, since by the time you access categories, it may not have been loaded with response data.

your app flows like this -

you load the controller
you call the service
service calls $http
you try to access categories (but data will not be available until response is returned from server)
$http.then loads data to $scope.categories

answered Nov 17, 2014 at 9:14

Rabi

2,23019 silver badges18 bronze badges

3 Comments

Jana Over a year ago

Strangely, in a test version without the framework things it worked... So if I want to capsulate the retrieve function in the service, what are you suggesting to do? Adding some wait-function comes to my mind but that seems like rather ugly hacking...

Rabi Over a year ago

correct - wait function would be ugly. You can use $watch on scope variables to see if data has arrived from server and act accordingly. But your second version is clean and preferred.

Jana Over a year ago

Well, maybe it's clean enough to work, but the function isn't cleanly separated like I wish it to be... :-( I'll see if $watch will help here, don't know this function so far.

Simon H · Accepted Answer · 2014-11-17 09:06:40Z

0

You are storing your data in Angular primitives and these don't update. instead store all your data in an object and it shoudl work (you'll also need to update controller)

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var data = {};

      $http.get("../mockdata/categories.json").then(function (response) {
        data.categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        data.subcategories = response.data;
      })
      return {
        getCategories: function(){
          return data.categories;
        },
        getSubCategories: function(){
          return data.subcategories;
        }
      }
    }
  );
})();

answered Nov 17, 2014 at 9:06

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

4 Comments

Jana Over a year ago

Thanks for the suggestion, I'll try that and post whether it works!

Jana Over a year ago

Well, now I'm getting Error: $scope.categories is undefined - though I of course instanciated $scope.categories and used the not-working-code from above for my controller. O.ó Why that? I don't know...

Simon H Over a year ago

You used $scope.categories = CategoryFactory.data.categories ?

Jana Over a year ago

No. As you return data.categories in the service, I just used $scope.categories = CategoryFactory.getCategories() to get exactly the category property of the data object.

Collectives™ on Stack Overflow

Angular JS: importing JSON data with $http.get() - works in controller, does not in a service - WHY?

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related