AngularJS: service query returning zero result

Question

my app.js looks like

var app = angular.module('pennytracker', [
  '$strap.directives',
  'ngCookies',
  'categoryServices'
]);

app.config(function($routeProvider) {
  console.log('configuring routes');
  $routeProvider
    .when('/summary', { templateUrl: '../static/partials/summary.html'})
    .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })
});

while my app/js/services/categories.js looks like

angular.module('categoryServices', ['ngResource']).
  factory('Category', function($resource){
    return $resource(
      '/categories/:categoryId',
      {categoryId: '@uuid'}
    );
  });

and I have a route as

  .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })

and my controller app/js/controllers/transactionController.js looks like

function AddTransactionController($scope, $http, $cookieStore, Category) {
 // some work here
  $scope.category = Category.query();
  console.log('all categories - ', $scope.category.length);
}

When I run my app, i see console.log as

all categories -  0

What is that I am doing wrong here?

Aleksander Blomskøld · Accepted Answer · 2013-05-08 19:04:48Z

15

Category.query() is asynchronous. It returns an empty array immediately and adds the result from the request later when the response arrives - from http://docs.angularjs.org/api/ngResource.$resource:

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data.

If you need to access the result in your controller you should do it in the callback function like this:

$scope.category = Category.query(function(){
  console.log('all categories - ', $scope.category.length);
});

edited May 8, 2013 at 19:04

Aleksander Blomskøld

18.6k10 gold badges79 silver badges82 bronze badges

answered May 5, 2013 at 22:02

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

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

1 Comment

daydreamer Over a year ago

geez :(,how come I missed that part in documentation. Thank you very much @joakimbi, it works now

Collectives™ on Stack Overflow

AngularJS: service query returning zero result

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related