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 in the $http / $resource paramSerializer property — Phil
– Phil, Commented Nov 30, 2015 at 2: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
– LeOn - Han Li, Commented Dec 10, 2015 at 4:33

georgeawg · Accepted Answer · 2015-12-14 01:14:45Z

3

+25

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, 2015 at 1:14

answered Dec 12, 2015 at 23:51

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr. BigglesWorth Over a year ago

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"

georgeawg Over a year ago

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 Over a year ago

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

georgeawg Over a year ago

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

Mr. BigglesWorth Over a year ago

.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 } } ); })

|

Collectives™ on Stack Overflow

Passing array style query parameters to a resource in Angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related