AngularJS: Sending requests via $resource with array type parameters (checkboxes, multiselects etc.)

Question

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. Can someone guide me a bit here? 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

Your help is greatly appreciated.

Thomas

score 3 · Answer 1 · edited May 23 '17 at 11:44

You can accomplish this using $resource by changing the client_status to 'client_status[]' like this:

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

I created a plunker for this: http://plnkr.co/edit/QXIaY8XlMUfOy7RNMKKv?p=info

I put a dummy URL in there so if you use Firebug or Chrome dev tools when you run the plunker, you will see the request to http://example.com/api showing the correct addition of the [] into the GET request.

A similar solution was noted in the answer to this question: https://stackoverflow.com/a/18322252/1866964

score 0 · Answer 2 · answered Apr 11 '13 at 05:21

Here is how I did with the $http provider:

$http({
    url:'api/api.asp',
    method: 'GET',
    params: {
        client_status: ["CLIENT_STATUS_FORMER", "CLIENT_STATUS_ACTIVE"],
        client_reference: "e"
    }
}).then(function (result) {
    $scope.test = result.data;
});

The call to the server becomes:

api/api.asp?client_reference=e&client_status=%5B%22CLIENT_STATUS_FORMER%22%2C%22CLIENT_STATUS_ACTIVE%22%5D

And on the server (here is classic asp vbscript):

<%
    Response.Write Request.QueryString("client_status")
%>

Which displays:

["CLIENT_STATUS_FORMER","CLIENT_STATUS_ACTIVE"]

And you can use it as a normal array.

EDIT: It should be very similar with the $resource provider:

$resource('api/api.asp', {}, {
    get: {
        method: 'GET',
        params: {
            client_status: ["CLIENT_STATUS_FORMER", "CLIENT_STATUS_ACTIVE"],
            client_reference: "e"
        }
    }
);

AngularJS: Sending requests via $resource with array type parameters (checkboxes, multiselects etc.)

2 Answers2