I am currently faced with the challenge of working with an API that utilizes array style query parameters for filtering items. Unfortunately, I am struggling to implement this in Angular.
For instance, the API endpoint requires a URL structure like:
example.com/api/list?filter[number]=1
In my current setup, I have a dropdown menu that assigns the selected value to the list of parameters and triggers a filter method. Typically, this process is straightforward when dealing with regular key-value pairs. However, in this case, the format required by the API complicates things.
$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);
});
};
The selection options in my view are as follows:
<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>
Here is the factory code:
.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
}
}
);
})
While simply adding filter:'1' to the existing $scope.parameters object would suffice under normal circumstances, I need to figure out how to add filter[number] = 1. How can I achieve this using ng-model and my current setup?