angular resource error when objects are returned

Question

Im using angular's resource to query some data, the problem is that what the query returns is not this:

[
    {"id":"5-w2k93ylznp6tj4i"}
    {"id":"6-njzmmwcpkw23ayvi"}
]

its this:

{"id":"5-w2k93ylznp6tj4i"}
{"id":"6-njzmmwcpkw23ayvi"}

instead of getting an array of objects, i get several objects, this makes angular throw this error:

SyntaxError: Unexpected token {
at Object.parse (native)

I think the error is because it does not expect another object. That query is for two items, if i query for just 1 item i get just one object and no error. I suspect that when there are two items, it does not expect a second object and throws the error in the first curly bracket after the first object ends.

Some code:

This is the resource:

list: resource (
            '/api/products',
            {
                limit: '@limit',
                skip: '@skip',
                sort: '@sort'
            }, 
            {
                query: {
                    method: 'GET',
                    interceptor: {
                        response: function (data) {
                            console.log('response in interceptor', data);
                        },
                        responseError: function (data) {
                            console.log('error in interceptor', data);
                        }
                    },
                    isArray: false
                }
            }
        )

Where the resource is used:

 factory.loadProducts = function(skip, sort){
    var data = Api.Product.list.query(
        {
            limit: appDataVars.limit,
            skip: skip,
            sort: sort
        }, function(response)
        {
            appDataVars.productsList = response;
        }, function(error)
        {
            console.error(error);
        });

    return data.$promise;
};

It always hits the error callback.

My problem is that i cant modify the api, i have to find a way to handle that result set in angular. Any idea how i can achieve that? Thanks.

It is a strange behavior, how you're api return two '{}' elements not in an arrray ? what if you make this appDataVars.productsList = [response]; instead of this ``appDataVars.productsList = response;` — AlainIb
– AlainIb, Commented Dec 31, 2015 at 1:34
Its strange yes, its not my api and i cant change a single line of it sadly. The change you suggest wont work as the error happens before that, even before the interceptors in the resource — Toddy
– Toddy, Commented Dec 31, 2015 at 1:42
The query you want to return will also not work since the objects are not separated by a comma. If all else fails, treat it as a string, add the commas and [ ] in, then eval. — James Buck
– James Buck, Commented Dec 31, 2015 at 1:43
can you past what the api return ( check in firebug or your browser debugger) — AlainIb
– AlainIb, Commented Dec 31, 2015 at 1:46

James Buck · Accepted Answer · 2015-12-31 02:09:54Z

2

Set the query object of the resource to contain a property for transformResponse set to the empty array:

query: {
    method: 'GET',
    interceptor: {
        response: function (data) {
            console.log('response in interceptor', data);
        },
        responseError: function (data) {
            console.log('error in interceptor', data);
        }
    },
    isArray: false,
    transformResponse: []
}

This will force the response to be treated as a string then change your function that handles the response to be:

function(response)
{
    appDataVars.productsList = eval('[' + response.replace(/\n/g, ',') + ']');
}

If the response string is not separated by a newline between objects change it to be response.replace(/}\s*{/g, '},{') (although this is quite a naive regex).

It's a bit hacky, but it should be a workaround since you can't modify the API.

edited Dec 31, 2015 at 2:09

answered Dec 31, 2015 at 2:01

James Buck

1,6409 silver badges14 bronze badges

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

4 Comments

AlainIb Over a year ago

will your code work with this response

{"id":"5-yfenlw852lzq6w29","size":32,"price":776,"face":"( ⚆ _ ⚆ )","date":"Wed Dec 30 2015 22:52:21 GMT-0300 (Montevideo Standard Time)"} {"id":"6-44a8vjdttmvrhpvi","size":24,"price":813,"face":"( ︶︿︶)","date":"Tue Dec 22 2015 23:53:07 GMT-0300 (Montevideo Standard Time)"}

?

AlainIb Over a year ago

it is not sure that the '}' of the first object and the '{' of the second one are separed by a new line.

Toddy Over a year ago

Thanks!! this works! can you please explain to me what this eval('[' + response.replace(/\n/g, ',') + ']'); does? i know it turns the response.data string into an array ob objects, but how?

James Buck Over a year ago

@Toddy Glad to hear it. Since the objects in the response string aren't separated by a comma we have to put them in there. That's what we use the replace method for. We then have to add in the square brackets to make it an array creation (eg. we need to transform the string into something that looks like '[{foo: 1}, {bar: 2}]'). The eval method will then translate the modified string into a javascript object, and that is assigned to the appDataVars.productsList variable.

Collectives™ on Stack Overflow

angular resource error when objects are returned

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related