AngularJS return resource from service

Question

Everything works fine but I have problem getting source from service.

I have SERVICE code below.

app.factory('myService', 
    function($rootScope, ResourceData) {
    var result = {};
    var data   = ResourceData.query();

    result.getData = function() {
        // problem here
    }

    return result;
});

And CONTROLLER contain code.

app.controller('myController', ['$scope', 'myService', 
    function myController($scope, myService) {
       $scope.data = myService.getData();
});

My problem is if I have function in my SERVICE like this

result.getData = function() {
   return data;
}

Everything works fine but I need to filter that data before I get it

If I change body like this I get an empty array the problem seems like it is from AngularJS.

If I create static array it works.

result.getData = function() {
   var arr = [];

        angular.forEach(data, function(item, key) {
              // simple filter
              if(item.ID > 10) {
                  return;
              }          
              else {
                  arr.push(item);
              }  
        });

        return arr;
}

put a debugger statement in the angular.forEach and look in the console what your datas look like on load. — mpm
– mpm, Commented Jan 1, 2013 at 17:41
i said ... empty array if i put console debug into angular.foreach that ignore foreach .. if i put before or end foreach it working fine — daremachine
– daremachine, Commented Jan 1, 2013 at 17:43
i dont know why doing this because if i direct call on change button it filtered fine .. if varify for source return true but in foreach looks like null or something .. that ignoring foreach — daremachine
– daremachine, Commented Jan 1, 2013 at 17:46

Mark Rajcok · Accepted Answer · 2013-01-02 04:04:41Z

2

The result of "ResourceData.query()" is asynchronous:

When the data is returned from the server then the object is an instance of the resource class... 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.

When the page first loads, I'm guessing that the controller runs before the data is returned from the server, so the first time getData() is called, data is probably not yet populated with any data, so you get an empty array.

One solution to your problem would be to filter the data in the view/HTML with an Angular filter, rather than in the service.

<div ng-repeat="item in data | filter:myFilter">
   {{item.ID}}: {{item...}}
</div>

Then in your controller:

$scope.myFilter = function(item) {
   return item.ID <= 10;
}

answered Jan 2, 2013 at 4:04

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

1 Comment

daremachine Over a year ago

thank you a lot for your help... i create filter in my controller and working perfect!

Collectives™ on Stack Overflow

AngularJS return resource from service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related