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?

Try specifying the [`$httpParamSerializerJQLike`](https://docs.angularjs.org/api/ng/service/$httpParamSerializerJQLike) in the `$http` / `$resource` `paramSerializer` property — Phil, Nov 30 '15 at 02:18
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. — LeOn - Han Li, Dec 10 '15 at 04:33

georgeawg · Answer 1 · 2015-12-14T01:14:45.347

3

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

edited Dec 14 '15 at 01:14

answered Dec 12 '15 at 23:51

georgeawg

48,608
13
72
95

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" – Mr. BigglesWorth Dec 13 '15 at 02:52
Then I need to see the code for `LFGFactory.query`. How did it change "number" to "name"? It is not following jQuery param rules. – georgeawg Dec 13 '15 at 03:28
I'm getting filter%5Bnumber%5D=1184 which is filter[number]=1184 – georgeawg Dec 13 '15 at 16:10
See update. If that doesn't work, I need to see the code for `LFGFactory.query`. – georgeawg Dec 13 '15 at 16:19
.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 } } ); }) – Mr. BigglesWorth Dec 13 '15 at 22:36
Please edit your question to add your code. The edit link is left of your name between the `share` and `flag` links. – georgeawg Dec 13 '15 at 23:15

Passing array style query parameters to a resource in Angularjs

1 Answers1