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

Question

I am returning an array of objects from the server:

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

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

 TypeError: value.push is not a function 

Is there a problem with the answer 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(); 

Services:

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

VideoStream:

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

Answer 1

The problem is that you are instantiating 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 Return

$:

An object of class "class" with methods for a set of default resources actions, optionally supplemented by user actions. Installed by default contains the following actions:

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

A call to these methods calls $ http with the specified http method, destination, and parameters. When data is returned from the server, the object is an instance of the resource class. Save, delete and delete actions are available on it as methods using $ Prefix.

Answer 2

In addition to Wawy, answer as per docs here

The action methods of a class object or an instance object can be called with the following parameters:

• HTTP GET "class" actions: Resource.action ([parameters], [success], error])
• actions of the non-GET class: Resource.action ([parameters], postData, [success], [error])
• non-GET instance actions: instance. $ action ([parameters], [success], [error])

When checking the VideoStream value in the controller, we find:

 function Resource(value) { shallowClearAndCopy(value || {}, this); } // Actual Resource class object with regular action(s) we can work with 

there

A call to VideoStream({param: 'streamTypes'}) returns:

 undefined // Cannot call anything of undefined 

and new VideoStream({param:'streamTypes'}) returns:

 Resource {param: "streamTypes"} // Instance of the Resource class (an object) where $action(s) are available // Verified in the chrome console 

Given this, the case should be:

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