Passing array style query parameters to a resource in Angularjs

[jo...@mediacrumb.com]

I'm currently working with an API that uses array style query parameters to filter items but I'm not quite sure how to get this working in Angular.

In my example below I have a drop down that takes the ng-model of the selection and applies this to the list of paramenters and then fires a method to filter my list. Normally that is simple when dealing with normal key value. However in this case the URL calls for something like the following:

example.com/api/list?filter[number]=1

My current set up looks like so

$scope.paramers = {
    include: 'playing', 
    sort: '-id'
};
$scope.refresh = function () {
    LFGFactory.query($scope.paramers, function success (response) {
        $scope.loading = true;
        var data = response.data;
        if (data.length >= 1) {
            $scope.rowList = data;
            $scope.loading = false;
        } else {
            $scope.loading = false;
        }
    },
    function err (data) {
        console.log(data);
    });
};

While my view looks like so:

        <div class="form-group pull-right">
            <select id="plat-sel" name="plat-sel" class="form-control" ng-model="paramers.filter" ng-change="refresh()">
                <option value="" disabled selected>Filter by Platform</option>
                <option value="1183">Xbox One</option>
                <option value="1184">PlayStation 4</option>
                <option value="1182">PC</option>
                <option value="1188">Wii U</option>
                <option value="1186">Xbox 360</option>
                <option value="1185">PlayStation 3</option>
            </select>
        </div>

Normally this would be fine if all I wanted was to add filter:'1' to the existing $scope.paramers object. However I need to somehow add filter[number] = 1 instead. How would I go about this with ng-model and my current set up?

[Vaibhav Gupta]

Hi,

This custom code can be handled in LFGFactory. Please find the plunk for this below. I have used jquery's param function to convert array into query parameter.

http://plnkr.co/edit/974lrDNhbU9jeIs1LoZg?p=preview

Hope this helps.

Regards,

Vaibhav Gupta

[jo...@mediacrumb.com]

This seems really close but it has two issues.  

1) The payload sends the value as filter[1188]:1 but the API looks for a static name that is followed by the actual value selection such as filter[name]:1188. 

2) The other issues is that it seems to send off without any encoding (I.E. http://run.plnkr.co/url?include=playing&sort=-id&filter%5B1188%5D=1) which will more then likely cause an issue on the server side.

[jo...@mediacrumb.com]

I've change the plunker to my new format but came across another issue.

1) In this current example the filter param is sent with every request.  However I only want to send it if the user makes a selection.  Other wise it should only contain 

  $scope.paramers = {
    include: 'playing',
    sort: '-id'
  };

2)  The other issues is that it seems to send off without any encoding (I.E. http://run.plnkr.co/url?include=playing&sort=-id&filter%5B1188%5D=1) which will more then likely cause an issue on the server side.