Calling a function from a ngResource object not working

Question

Lets say I have a factory called 'Stuff'.

app.factory('Stuff', function($resource) {
  return $resource('api/v1/stuff/', {}, {
    getThings: {
      method: 'GET',
      params: {id: '@id'},
      url: 'api/v1/things/:id',
      isArray: true
    }
  });
});

In this factory I have a custom getThings function.

In my controller, if I do this:

$scope.stuffs = Stuff.query();
$scope.things = Stuff.getThings({id: $scope.stuffs[0].id});

It works, and $scope.things is what I want.

But if I do this:

$scope.stuffs = Stuff.query();
$scope.things = $scope.stuffs[0].$getThings();

I get an error in angular-resource. The ajax call happens to the correct url and I get correct data back but getThings errors out immediatly after getting data, and the only thing left in $scope.things is what looks like a promise:

Object {then: function, catch: function, finally: function}

The error in JS console is:

TypeError: undefined is not a function
    at http://dev.blah.com/assets/angular-resource/angular-resource.js?body=1:558:27
    at forEach (http://dev.blah.com/assets/angular/angular.js?body=1:326:18)
    at $http.then.value.$resolved (http://dev.blah.com/assets/angular-resource/angular-resource.js?body=1:556:17)
    at wrappedCallback (http://dev.blah.com/assets/angular/angular.js?body=1:11574:81)
    at wrappedCallback (http://dev.blah.com/assets/angular/angular.js?body=1:11574:81)
    at http://dev.blah.com/assets/angular/angular.js?body=1:11660:26
    at Scope.$eval (http://dev.blah.com/assets/angular/angular.js?body=1:12703:28)
    at Scope.$digest (http://dev.blah.com/assets/angular/angular.js?body=1:12515:31)
    at Scope.$apply (http://dev.blah.com/assets/angular/angular.js?body=1:12807:24)
    at done (http://dev.blah.com/assets/angular/angular.js?body=1:8380:45)

I can't figure out why this isn't working.

Ian Walter · Answer 1 · 2014-10-22T17:32:35.687

0

I believe a promise is returned on a resource query. Try this:

Stuff.query(function(response) {
  response[0].$getThings(function(things) {
    $scope.things = things;
  );
});

Or:

Stuff.query()
  .$promise
  .then(function(stuff) {
    $scope.stuffs = stuff;
    return stuff[0].$getThings();
  })
  .then(function(things) {
    $scope.things = things;
  });

edited Oct 22 '14 at 17:32

answered Oct 22 '14 at 16:56

Ian Walter

882
2
8
23

score 0 · Answer 2 · answered Oct 23 '14 at 20:05

See this plnkr http://plnkr.co/edit/qlMrZ9?p=preview. You are returned a $promise on $resource.query() and using the returned value before it is resolved will get you errors.

This is in services.js

var myServices = angular.module('myApp.services', ['ngResource']);
myServices.factory('Stuff', ['$resource', function($resource) {
    return $resource('stuff.json', {}, {
    getThings: {
      method: 'GET',
      params: {id: '@id'},
      url: ':id/things.json',
      isArray: false
    }
  });
}]);

This is in controllers.js

angular.module('myApp.controllers', [])
  .controller('MyCtrl1', ['$scope', 'Stuff', function($scope, Stuff) {
    $scope.data = {};
    $scope.thingies = [];
    $scope.data = Stuff.get();
    console.log('is stuffs resolved='+$scope.data.$resolved);
    $scope.thingies = Stuff.getThings({id: 'id1'});    
    console.log('is thingies resolved='+$scope.thingies.$resolved);
  }])

  .controller('MyCtrl2', ['$scope', 'Stuff', function($scope, Stuff) {
    $scope.data = {};
    $scope.thingies = [];
    $scope.status = [];
    Stuff.get(function(response){}).$promise.then(
      function(value1) {
        $scope.data = value1;
        console.log("MyCtrl 2 stuffs="+$scope.data.stuffs[0].id);
        Stuff.getThings({id:$scope.data.stuffs[0].id}).
        $promise.then(
          function(value2){
            $scope.thingies = value2;
            console.log("MyCtrl 2 thingies="+value2.things);
          }, function(error2){
            console.log('error in Stuff.getThingies='+error2);
            $scope.status = error2;
          });
      }, function(error1){
        console.log('error in Stuff.get='+error1);
        $scope.status = error1;
      }
    );
  }]);

I don't understand your line of code. There is something missing for this line to work.

$scope.stuffs[0].$getThings();

You need to show us your actual code or create a plnkr so that we can help you better.

Calling a function from a ngResource object not working

2 Answers2