AngularJS Service Isn't Returning Data

Question

I have to AngularJS services to load data to my app which are set up in essentially the same way, although one works and one does not.

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'])
  .service('uniqueLists', function ($http) {
    console.log("Getting Unique Lists")
    var itemsToList = [
      'designer',
      'store',
      'category'
    ]
    var uniqueLists = {};
    var promise = (function(){
      console.log("Inside Function")
      for (var i = 0; i<itemsToList.length; i++){
        var item = itemsToList[i];
        uniqueLists[item] = [];
        $http.get('/api/uniques/' + item, { cache: true}).
        success(function (data){
          uniqueLists[item] = data.query;
          console.log(i + " out of " + itemsToList.length);
          if (i == itemsToList.length -1){
            return uniqueLists;
          }
        });
      };
    })();
    return promise;
})

I think my main issue is that the $http call is non-blocking. For instance, when I try to console.log(i + " out of " + itemsToList.length) I see:

3 out of 3
3 out of 3
3 out of 3

In turn, in my app when I try to use uniqueLists like so:

function homeCtrl($scope, $location, uniqueLists, userInfo){
  uniqueLists.then(function(obj){
  // Do stuff
  });
}

I get the error TypeError: Object [object Object] has no method 'then'

Any ideas on how to fix this? The $http.get api call works just fine so I think it's just a blocking/async problem.

kfis · Accepted Answer · 2013-11-09 08:56:54Z

1

Try this untested code

angular.module('myApp', [])
  .service('uniqueLists', function ($http, $q) {
  console.log("Getting Unique Lists")
  var itemsToList = [
    'designer',
    'store',
    'category']
  var uniqueLists = {};
  var promises = []

  console.log("Inside Function")
  for (var i = 0; i < itemsToList.length; i++) {
    var item = itemsToList[i];
    promises.push(http.get('/api/uniques/' + item, {
        cache: true
    }));
  };

  var defered = $q.defer();
  $q.all(promises).then(function (data) {
    for (var i = 0; i < data.length; i++) {
        var item = itemsToList[i];
        uniqueLists[item] = data[i].query;
    }
    defered.resolve(uniqueLists);
    }, function (error) {
    defered.reject(error)
  });

  return defered.promise;
 })

answered Nov 9, 2013 at 8:56

kfis

4,72925 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Service Isn't Returning Data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related