$resource Arrays as parameters support needed

[bs-thomas]

Hello guys,

I have problems trying to use the $resource library in AngularJS to send a properly serialized GET request when there is an array of checkboxes (client_status) in my GET parameters.

This is the code I have right now in my controller:

$scope.filters = {
client_status: ["CLIENT_STATUS_FORMER", "CLIENT_STATUS_ACTIVE"],
client_reference: "e"
}

$scope.records = Client.get($scope.filters, function(data){
...
}

The above will send the following GET request:

f.json?client_reference=e&client_status=CLIENT_STATUS_FORMER,CLIENT_STATUS_ACTIVE

However, from what I understand, the above seems like it's not the correct format (at least for my REST server). The following is what I expect:

f.json?client_reference=e&client_status%5B%5D=CLIENT_STATUS_ACTIVE&client_status%5B%5D=CLIENT_STATUS_FORMER

May I ask for a fix on this? Or perhaps, if there are different standards for different servers, can this mode be supported somehow?

The use case here would be checkbox groups, multi-selects etc.

Your help is greatly appreciated!

Cheers,
Thomas

PS - Together with this task, I've also made a directive that can bind checkbox inputs more conveniently (as a array of values). I'd like to share & contribute this, and perhaps have someone look and refactor my code if necessary, but who should I talk to on this?

[bs-thomas]

Hello guys,

I've made some modifications to angularjs-resource.js.

I'm not too sure about how to contribute, but I compiled the unified diff here, it's pretty straight forward, and it supports the times when query strings are "arrays" (made the check at typeof), just like the use-case I have mentioned above.

Index: angular-resource.js
===================================================================
--- angular-resource.js (revision 15659)
+++ angular-resource.js (revision 15665)
@@ -311,7 +311,9 @@
         var query = [];
         forEach(params, function(value, key){
           if (!self.urlParams[key]) {
-            query.push(encodeUriQuery(key) + '=' + encodeUriQuery(value));
+            forEach(value, function(v){
+              query.push(encodeUriQuery(key + ((typeof value === 'object')?'[]':'')) + '=' + encodeUriQuery(v));
+            });
           }
         });
         query.sort();

This will now send the following request:
f.json?client_reference=e&client_status%5B%5D=CLIENT_STATUS_ACTIVE&client_status%5B%5D=CLIENT_STATUS_FORMER

Please kindly comment and advise. Perhaps if it were helpful at all, this fix can come up in the next release.

Thank you very much for your kind attention!

Cheers,
Thomas

[bs-thomas]

Fixed a bug. Here's the global change.

Index: angular-resource.js
===================================================================
--- angular-resource.js (revision 15659)
+++ angular-resource.js (revision 15674)
@@ -311,7 +311,12 @@
         var query = [];
         forEach(params, function(value, key){
           if (!self.urlParams[key]) {
-            query.push(encodeUriQuery(key) + '=' + encodeUriQuery(value));
+            if(typeof value === 'object')
+              forEach(value, function(v){
+                query.push(encodeUriQuery(key + '[]') + '=' + encodeUriQuery(v));
+              });
+            else
+              query.push(encodeUriQuery(key) + '=' + encodeUriQuery(value));
           }
         });
         query.sort();

[bs-thomas]

Hello I was wondering if this issue is being looked at. I thought it might be convenient for this to get fixed together on the next revision, so I don't have to make the merge everything AngularJS gets a new version.

Can someone please kindly clarify on this?

Thank you very much for your attention.

[MattiNieminen]

The fix does not do it for me. For some reason, when I use request to send parameters the execution of code does not go inside if (!self.urlParams[key]) {...} -section. I don't use object with key-value -pairs but but array of strings.

My resource:

angular.module('someService', ['ngResource']).
    factory('Article', function($resource) {
    return $resource('api/articles/:keywords', {keywords: '@keywords'}, {
        query: {method:'GET', params:{}, isArray:true}
    });
});

Usage:

 var update = Article.query({keywords: $scope.keywords}, function() {
            $scope.articles = update;
});

[bs-thomas]

Hello Matti,

Thanks for your comment.
Can you give me the ideal URL query that you would like to generate from your example above? I'm going to trial your case scenario, but would like to be certain thats the exact output you want.

Chees,
Thomas

[MattiNieminen]

In my case Angular produces api/articles/param1,param2,param3. Now that you say this I have to admit I have no idea what the RESTful URL would look like in this case..

[glebsts]

Hello,
any news here?

[vavd]

+1

[vavd]

In ver 1.1.5 the issue was solved.
#1921

[btford]

Looks like this has since been resolved.