TypeError: value.push is not a function with Angularjs $resource query

Kaspar picture Kaspar · Jul 16, 2015 · Viewed 10.4k times · Source

I am returning a array of objects from the server:

[{id: 1, name: "name"},{id: 2, name: "name2"}]

Now I use angular-resource $query to fetch the data as it expects an array. When the data is received I get this error:

TypeError: value.push is not a function

Is there an issue with the response I give from server=?

Source of error:

 // jshint +W018
                if (action.isArray) {
                  value.length = 0;
                  forEach(data, function(item) {
                    if (typeof item === "object") {
                      value.push(new Resource(item));
                    } else {
                      // Valid JSON values may be string literals, and these should not be converted
                      // into objects. These items will not have access to the Resource prototype
                      // methods, but unfortunately there
                      value.push(item);
                    }
                  });
                } else {
                  shallowClearAndCopy(data, value);
                  value.$promise = promise;
                }
              }

Controller:

var stream = [];
stream = new VideoStream({param: 'streamTypes'});
stream.$query();

Service:

app.service('DataService', [
    '$resource', 'Common', '$rootScope',
    function($resource, Common, $rootScope) {
        return $resource($rootScope.appWebRoot + "myUrl/:param", {param: '@param'},
        {

        });
    }
]);

enter image description here enter image description here enter image description here

VideoStream:

app.service('VideoStream', [
    '$resource', 'Common', '$rootScope',
    function($resource, Common, $rootScope) {
        return $resource($rootScope.appWebRoot + "videoStreams/api/:param",
        {param: '@param'},
        {

        });
    }
]);

Answer

Wawy picture Wawy · Jul 16, 2015

The problem you have is that you are creating an instance of your resource as an object

var stream = [];
stream = new VideoStream({param: 'streamTypes'}); //This is the problem. $resource is expecting an array.
stream.$query(); //This is an instance method.

//All you need to do is:
var stream = [];
stream = VideoStream({param: 'streamTypes'}).query();

From https://docs.angularjs.org/api/ngResource/service/$resource:

$resource returns:

A resource "class" object with methods for the default set of resource actions optionally extended with custom actions. The default set contains these actions:

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

Calling these methods invoke an $http with the specified http method, destination and parameters. When the data is returned from the server then the object is an instance of the resource class. The actions save, remove and delete are available on it as methods with the $ prefix