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
      }
    }
  );
})();

Answer 1

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]);
    }
  });

Answer 2

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;
        }
      }
    }
  );
})();

Answer 3

$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 -

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