AngularJS GET ajax call with Array parameters

Question

I have already seen the following SO questions Send array via GET request with AngularJS' $http service and Pass array of data from Angular $http POST. But the suggested solutions there does not seem to work for me. Mine is specifically about array objects.

I have the following AngularJS ajax call with array parameters

return $http({
    method: 'GET',
    url: '/api/PatientCategoryApi/PatCat',
    params: { "numbers[]": [{ First: 999, Second: 888 }]},
    headers: { 'Content-Type': 'application/Json' }
})

The url generated by that call does not seem to work for me. I have tried various avatars of params, and the url generated (got them by using fiddler) are as follows.

params: { numbers: JSON.stringify([{ First: 999, Second: 888 }]) },
http://localhost:50849/api/PatientCategoryApi/PatCat?numbers=%5B%7B%22First%22:999,%22Second%22:888%7D%5D 

params: { "numbers[]": JSON.stringify([{ First: 999, Second: 888 }]) },
http://localhost:50849/api/PatientCategoryApi/PatCat?numbers%5B%5D=%5B%7B%22First%22:999,%22Second%22:888%7D%5D 

params: { "numbers[]": [{ First: 999, Second: 888 }]},
http://localhost:50849/api/PatientCategoryApi/PatCat?numbers%5B%5D=%7B%22First%22:999,%22Second%22:888%7D 

params: { numbers: [{ First: 999, Second: 888 }]},
http://localhost:50849/api/PatientCategoryApi/PatCat?numbers%5B%5D=%7B%22First%22:999,%22Second%22:888%7D 

I want the url to be http://localhost:50849/api/PatientCategoryApi/PatCat?numbers[0][first]=999&numbers[0][second]=888. Because this is the only way my Asp.net MVC server side code is able to understand and decipher the array.

One way is to set the url itself to hold the params fully as follows. The following is working. This is the last option for me.

return $http({
    method: 'GET',
    url: '/api/PatientCategoryApi/PatCat?numbers[0][first]=999&numbers[0][second]=888&numbers[1][first]=9999&numbers[1][second]=8888',
    //params: {...}, remove this completely
    headers: { 'Content-Type': 'application/Json' }
})

But I want to understand, how to do this using params so AngularJS will do that for me.

Answer 1

You want the httpParamSerializerJQLike! Use it like this:

$http({
  ...
  params: { "numbers": [{ First: 999, Second: 888 }]},
  paramSerializer: '$httpParamSerializerJQLike',
  ...
});

Or you can set it up as your default for all $http calls in a configuration block, like this:

angular.module('yourModuleName').config(function($httpProvider) {
  $httpProvider.defaults.paramSerializer = '$httpParamSerializerJQLike';
});