$resource throws TypeError when json has both properties and arrays

[codebreach]

When using resource on an endpoint which returns json objects of the form:

{ 
  "property1": "value1",
  "property2": "value2",
  "array1": [ {"p1": "v1"}, {"p2": "v2"} ]
}

The resource class throws an error:
TypeError: Object #<Resource> has no method 'push'
at copy (http://code.angularjs.org/angular-1.0.0rc8.js:557:21)
at new Resource (http://code.angularjs.org/angular-resource-1.0.0rc8.js:323:9)
at http://code.angularjs.org/angular-resource-1.0.0rc8.js:379:32
at forEach (http://code.angularjs.org/angular-1.0.0rc8.js:118:20)
at http://code.angularjs.org/angular-resource-1.0.0rc8.js:378:19
at http://code.angularjs.org/angular-1.0.0rc8.js:6349:59
at http://code.angularjs.org/angular-1.0.0rc8.js:6386:26
at Object.$eval (http://code.angularjs.org/angular-1.0.0rc8.js:7444:28)
at Object.$digest (http://code.angularjs.org/angular-1.0.0rc8.js:7316:25)
at Object.$apply (http://code.angularjs.org/angular-1.0.0rc8.js:7527:22)

This is due to the Resource class not taking into consideration that part of the json can be an array. It assumes that the destination for copy is already an array when in reality its a Resource and then the push call fails.

[codebreach]

This only happens when a Query is done instead of a Get.
This might be expected behavior. Please close the issue in that case.

[AndrewO]

I had this same problem. It went away when I had my server return a JSON array at the top level, rather than an object. It makes some sense to assume that .query would normally return an Array, although I can think of situations where I'd want .query to return an object like:

{
  results: [...],
  pagination: {
    prev: http://...,
    next: http://...
  }
}

Looking at the declaration of the default actions for "query", it looks like you can override isArray to false. I haven't tried it myself though.

[mullr]

I ran in to what appears to be the same issue. The json was an array of objects:

[
  { a: "1", b: "2", c: "3"}, 
  { a: "1", b: "2", c: "3"}
]

It gave me a stack trace like this:

TypeError: Object #<Resource> has no method 'push'
    at copy (http://localhost:3000/javascripts/angular-1.0.1.js:556:21)
    at angular.module.factory.Resource.(anonymous function) (http://localhost:3000/javascripts/angular-resource-1.0.1.js:382:19)
    at deferred.promise.then.wrappedCallback (http://localhost:3000/javascripts/angular-1.0.1.js:6586:59)
    at ref.then (http://localhost:3000/javascripts/angular-1.0.1.js:6623:26)
    at Object.$get.Scope.$eval (http://localhost:3000/javascripts/angular-1.0.1.js:7770:28)
    at Object.$get.Scope.$digest (http://localhost:3000/javascripts/angular-1.0.1.js:7642:25)
    at Object.$get.Scope.$apply (http://localhost:3000/javascripts/angular-1.0.1.js:7856:24)
    at done (http://localhost:3000/javascripts/angular-1.0.1.js:8845:20)
    at completeRequest (http://localhost:3000/javascripts/angular-1.0.1.js:8985:7)
    at <error: Error: INVALID_STATE_ERR: DOM Exception 11> 

This was doing a get().

[sbeam]

this is expected behavior. When your JSON returns an array, use query(), if it returns a single object use get() - you can override this by passing isArray true or false as needed, but the default is in line with REST convention

[mullr]

Ah, that makes sense. I was going to blame the docs, but on second inspection they're perfectly lucid on the matter. Thanks.

[pkozlowski-opensource]

Looks someone else bumped into the same recently: #1689.
Maybe it would be a good idea to check - if the methods expecting array results - that what coming from the back-end is indeed and array and throw an informative message?

[evictor]

AndrewO, you can pass metadata in custom response headers, then retrieve them from the header getter function that is passed as the second argument to the success callback.

[bm-w]

Ran into @AndrewO's issue as well, where the server response to a list request (so I'm naturally using query) with an object to account for pagination. In my case, Tastypie (a Django REST framework) returns something like {"meta": {"next": ..., etc.}, "objects": [...]}.

Now, I do agree with @evictor's comment that this type of meta data should really be in response headers instead of the response body. But we don't always own the server, and cannot always make sure that responses follow good practices. Perhaps a solution like this would be acceptable (in the function handling the response, in the ngResource module):

if (action.isArray) {
  if (!isArray(data)) {
    var accessor = /* ...some way to get a configurable accessor()... */ || 'objects';
    data = isFunction(accessor) ? accessor(data) : data[accessor];
  }
  //...
}

(Now, my apologies if a solution like this—which deals with others' bad practices—is against Angular's design philosophy.)

[joforiam]

Sill having this problem, but actually when executing POSTs (Angular v1.0.4) e.g. -

In the Service:

services.factory('OutlineService', ['$resource', function($resource){
    return $resource('/outline/:action/:id', {}, {
        list: {method:'GET', params:{action:'list'}, isArray:false},
        save: {method:'POST' },
        organize: {method:'POST', params:{action:'organize'}},
        summarize: {method:'POST', params:{action:'summarize'}},
        hierarchy: {method:'GET', params:{action:'hierarchy'}, isArray:false},
        query: {method:'GET', params:{id:'outlineId'}, isArray:false}
    });
}]);

In the controller:

    OutlineService.save({action:'organize'}, outlineGroupings, function(responseData){
        //success handling here
    })

Where 'outlineGroupings' is an array of objects. This all results in:

TypeError: Object # has no method 'push'
at copy (http://skribe.local/global/assets/js/libs/angular/1.0.4/angular.js?1358963974:556:21)
at new Resource (http://skribe.local/global/assets/js/libs/angular/1.0.4/angular-resource.js?1358963974:339:9)

The request doesn't event hit the server, so I don't think it's a response issue in my case.

[evictor]

@joforiam, your server probably isn't understanding AngularJS's application/json input. Consider trying this technique I outlined in a blog post re: configuring AngularJS to send using x-www-form-urlencoded: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

[joelwreed]

I am seeing this issue with angular 1.0.5 with a ".get" call that returns an object which has an array as one of its properties.

[joelwreed]

seems like angular.copy gets into this part of the code where destination is not an array.

if (isArray(source)) {
  destination.length = 0;
  for ( var i = 0; i < source.length; i++) {
    destination.push(copy(source[i]));
  }
} else {

[joelwreed]

I'm going to try running with this for a while

diff --git public/js/angular.js public/js/angular.js
index 68b33c7..c201241 100644
--- public/js/angular.js
+++ public/js/angular.js

@@ -571,7 +571,7 @@ function copy(source, destination){
     }
   } else {
     if (source === destination) throw Error("Can't copy equivalent objects or arrays");
-    if (isArray(source)) {
+    if (isArray(source) && isArray(destination)) {
       destination.length = 0;
       for ( var i = 0; i < source.length; i++) {
         destination.push(copy(source[i]));

[taem]

I'm having this issue also with AngularJS 1.0.5. My REST method returns following JSON response

[
  [
    "=", "<=", "<", ">=", "<>"
  ],
  null
]

Error message

TypeError: Object #<g> has no method 'push'
    at U (http://localhost:9000/public/javascripts/angular.min.js:10:185)
    at new g (http://localhost:9000/public/javascripts/angular-resource.min.js:7:129)
    at http://localhost:9000/public/javascripts/angular-resource.min.js:8:229
    at Array.forEach (native)
    at n (http://localhost:9000/public/javascripts/angular.min.js:6:192)
    at http://localhost:9000/public/javascripts/angular-resource.min.js:8:206
    at h (http://localhost:9000/public/javascripts/angular.min.js:77:33)
    at http://localhost:9000/public/javascripts/angular.min.js:77:266
    at Object.e.$eval (http://localhost:9000/public/javascripts/angular.min.js:87:347)
    at Object.e.$digest (http://localhost:9000/public/javascripts/angular.min.js:85:198) angular.min.js:61

I'm using query().
Thanks in advance.