Angular Resource: Error: $resource:badcfg

Question

I have looked at other posts here but still can't resolve my issue.

I get a Error:

$resource:badcfg Response does not match configured parameter

I believe this error is caused by it returning an array rather than an object or vice versa.

Here's my code:

Inside my factory(I added the isArray: false but still not luck)

var task = $resource('http://localhost:5000/task/:id', {id:'@id'}, {
    'get': {method:'GET', isArray: false},
}); 

Then in the return section of my factory

    find: function(id){
      return task.get({ id: id });
    }

In my Flask server it does the correct response when I load the page:

127.0.0.1 - - [28/Feb/2017 14:35:13] "GET /task/1 HTTP/1.1" 200 -

However I still get the error?

Also this is what my server provides if i put it in the browser http://localhost:5000/task/1

[{"completed": true, "id": 1, "ownerName": "Ryan", "task": "Test Activity", "title": "A test task"}]

Iv also tried this and get the same error:

console.log(task.get({ id: 1 }));

Answer 1

This error occurs when the $resource service expects a response that can be deserialized as an array but receives an object, or vice versa. By default, all resource actions expect objects, except query which expects arrays.

To resolve this error, make sure your $resource configuration matches the actual format of the data returned from the server.

--AngularJS Error Reference - $resource:badcfg

The default actions for $resource are:

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

Avoid changing the default method:

var task = $resource('http://localhost:5000/task/:id', {id:'@id'}, {
    //AVOID changing default
    //'get': {method:'GET', isArray: true},
});

Instead use the query action method:

find: function(id){
  //return task.get({ id: id });
  //INSTEAD use query action method
  return task.query({ id: id });
}

This will avoid confusing programmers that are familiar with the conventions of the $resource service.

For more information, see AngularJS $resource API Reference.

---

Using transformResponse to Extract Object from Array

If the server is erroneously returning the resource object enclosed in an array, it can be extracted with a response transform function:

var task = $resource('http://localhost:5000/task/:id', {id:'@id'}, {
    'get': {method:'GET',
            transformResponse: function(json) {
                var data = angular.fromJson(json);
                if ((typeof data == 'array' && (data.length == 1)) {
                   return data[0];
                } else {
                   return data;
                };
            } 
     }
});

Answer 2

Have you tried with something like:

var task = $resource('http://localhost:5000/task/:id', {id:'@id'}, {
    'get': {method:'GET', isArray: false},
  });

You've missed {id:'@id'} to pass paramter id

Answer 3

Turns out I needed to set isArray: false to true so:

  var task = $resource('http://localhost:5000/task/:id', {id:'@id'}, {
    'get': {method:'GET', isArray: true},
  });