Passing array style query parameters to a resource in Angularjs

Question

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>

Factory below

  .factory('LFGFactory', function($resource) {

    var base = 'http://example.com/api/v1.0/';


    return $resource(base +'lfg', {},
        {
          update: {
            method: 'PUT',
            isArray: true
          },
          delete: {
            method: 'DELETE',
            isArray: true
          },
          query: {
            method: 'GET',
            isArray: false
          }
        }
    );
  }) 

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?

Biddle

Try specifying the $httpParamSerializerJQLike in the $http / $resource paramSerializer property – Condemn

Do you have to use the 'LFGFactory.query'? it would be easier to just construct the url and parameter your own on the fly if you have special needs in the url parameter. – Mouthwash

Answer 1

Looking at your LFGFactory service:

angular.module('myApp').factory('LFGFactory', function($resource) { 
      var base = 'example.com/api/v1.0/';
      return $resource(base +'lfg', {}, 
            { update: { method: 'PUT', isArray: true }, 
              delete: { method: 'DELETE', isArray: true }, 
              query:  { method: 'GET', isArray: false } } 
      );

}) 

You are using ngParamSerializer

Change your select element to:

 <select id="plat-sel" name="plat-sel" class="form-control" 
          ng-model="paramers['filter[number]']" ng-change="refresh()">

The JSFiddle

Mercaptopurine

Not a bad method. Only issue is that it send to the server as filter=%7B%22name%22:%221182%22%7D. In post data I see it as filter:{"name":"1182"} and not filter[name]:"1182" – Biddle

Then I need to see the code for LFGFactory.query. How did it change "number" to "name"? It is not following jQuery param rules. – Mercaptopurine

I'm getting filter%5Bnumber%5D=1184 which is filter[number]=1184 – Mercaptopurine

See update. If that doesn't work, I need to see the code for LFGFactory.query. – Mercaptopurine

.factory('LFGFactory', function($resource) { var base = 'example.com/api/v1.0'; return $resource(base +'lfg', {}, { update: { method: 'PUT', isArray: true }, delete: { method: 'DELETE', isArray: true }, query: { method: 'GET', isArray: false } } ); }) – Biddle

Please edit your question to add your code. The edit link is left of your name between the share and flag links. – Mercaptopurine