5

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.

Community
  • 1
  • 1
VivekDev
  • 20,868
  • 27
  • 132
  • 202
  • what is your angular version ? I can see there is a fix for this in angular js 1.2.9..not sure though – Chandan Nov 22 '15 at 06:29
  • Possible duplicate of [AngularJS - Send $http GET request with associative array params](http://stackoverflow.com/questions/24708103/angularjs-send-http-get-request-with-associative-array-params) – fracz Nov 22 '15 at 09:12
  • Seems that `jQuery.param({numbers: [{ First: 999, Second: 888 }]})` produces the result you expect. If you already have jQuery in your project, you can use it to construct the URL for you. – fracz Nov 22 '15 at 09:17
  • If you have jQuery then probably you can create params by jQuery and use it as follows - `var params = $.params({...});` then in angular `url: url+'?'+params` – Chandan Nov 22 '15 at 09:18
  • But is it ok to use JQuery and AngularJS together? – VivekDev Nov 22 '15 at 09:45

1 Answers1

6

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';
});
Eric Simonton
  • 5,702
  • 2
  • 37
  • 54
  • Hi Eric, Thank you for the suggestion. I shall give it a try and let you know. – VivekDev Nov 24 '15 at 01:51
  • 3
    I pulled my hair for long. I knew there would be something like this very simple. More over by this method we dont need to get JQuery into the picture as suggested by others. Thank You once again Eric – VivekDev Nov 25 '15 at 22:21
  • 1
    Like the previous guy, I was getting crazy! Thought I'd have to make this mechanism by myself.. It saved my life!! Thank you!!! – Saxophonist Sep 21 '17 at 13:41