Angularjs $resource - cannot pass array as one of the parameters

Question

I am trying to pass an array to our API from AngularJS. However when sent, the parameters are repeated instead of sent as an array. Here is my code:

    angular.module('sigApp.services', ['ngResource']).
    // Fetch cases from server
    service('caseFetcher', ['$resource', function($resource) {
        this.getCases = function(params) {
            console.log('params: ',params);
            return $resource('/v1/cases/', params);
        };
    }]);

Here is the URL (abbreviated) that is generated: /v1/cases?status=OPEN&status=HELD

Here is the URL I want: /v1/cases?status%5B0%5D=OPEN&status%5B1%5D=HELD (aka ?status[0]=OPEN&status1=HELD )

Here is the screenshot for the object that is logged in the code above: enter image description here

I have tried the latest version of angularjs (1.2rc1) and also tried the Restangular plugin. No matter what I try I get the params passed multiple times, rather than in array format. Our API can't work with multiple values with the same key.

Any ideas?

EDIT: Several people have marked this as duplicate when the other question (AngularJS: ngResource and array of object as params to URL) is not like this at all. The other question deals with sending an array via POST and I am trying to do a GET request (which set to isArray: true by default) and I want to pass only one of the parameters an array as, which that answer does not seem to help me to. So can someone please help with this?

Update I answered my own question below but as commented I am giving more information for any who come across this problem. We are using the Play Framework 2.1 for our backend. I was not able to generate the numbered array I originally posted above but was able to get it to work just an a non-indexed array so this is the URL that was generated that eventually worked:

/v1/cases?status%5B%5D=OPEN&status%5B%5D=HELD (aka ?status[]=OPEN&status[]=HELD )

Hope this helps someone else

It would be better if you also tag it with server side framework you are using, so that it can help other users. Adding the generated url in the answer would also be helpful. I believe it would not be what you originally intended in question. — rubish, Aug 19 '13 at 23:37

score 18 · Accepted Answer · answered Aug 19 '13 at 20:10

18

I solved my own issue by changing how the params were set that were passed to $resource. Instead of:

$scope.params.status = ['OPEN','HELD'];

I used:

$scope.params["status[]"] = ['OPEN','HELD'];

This allowed me to retrieve the values on the server as desired.

answered Aug 19 '13 at 20:10

Scotty Bollinger

2,343
4
19
25

Any way to make it **not** URL encode as `%5B%5D`? I need it to send as proper `[]`. – kspearrin Nov 20 '15 at 23:28

score 0 · Answer 2 · answered Aug 19 '13 at 17:44

I created a plunkr for this one here.

You are right, the resource service won't do what you want it to do.. at least I couldn't get it to. The way I was able to get it to work was by leveraging the $http service and building up my querystring with comma delimited values attached to the param 'status'. The result is a URI in the form:

http://run.plnkr.co/someUrl?status=One,Two,Three

On your API side, you can interpret the comma delimited arguments as elements with indexes.

The basic build up in the code is something like this:

var statusValues = ["One", "Two", "Three"];
var queryParams = "status=";
for (var i=0;i<statusValues.length;i++){
  queryParams += statusValues[i];
  if (i != statusValues.length-1){
    queryParams += ",";
  }
}
$http.get('/someUrl?' + queryParams).success(successCallback);

Thanks for posting this. Although it would have worked, the complexity of the query string would have cause a lot of conditional logic to prepare the string. I have answered the question myself; I changed the way that I assigned the variable and now it works as desired. Thanks again!! — Scotty Bollinger, Aug 19 '13 at 20:12

score 0 · Answer 3 · answered Nov 03 '14 at 16:32

For some reason the solution of setting the variable to an 'array' style name didn't work for me. The issue maybe AngularJS 1.0.8. For those that can't roll forwards here is a little function to break apart an object into parameters.

function queryBuilder(object){
    var key;
    var queryString = '?';
    var count=0;
    for (key in object){
        if(count !== 0){
            queryString+='&';
        }
        if(object[key] instanceof Array){
            var lengthOfObj =object[key].length;
            for(var i=0;i<lengthOfObj;i++){
                if(count !== 0){
                    queryString+='&';
                }
                queryString += key +'='+object[key][i];
                count++;
            }
        }else{
            queryString += key +'='+object[key];
        }
        count++;
    } 
    return queryString;
}

Usage:

var baseInfo = {
    someGetVar:someGetArray
}
var queryString = queryBuilder(baseInfo);
var url = 'someURL';

$http({method:'GET',url:url+queryString}).success(function(data){
    //success state
}).error(function(data){
    //Error state
))

Angularjs $resource - cannot pass array as one of the parameters

3 Answers3