How to pass an array as a querystring in a GET request by using JQuery AJAX

Question

In my javascript application I am trying to pass an array of strings, among other parameters, in a GET request to an ASP.NET Web API REST service by using jQuery Ajax. An example URL is as follows:

http://my.services.com/products?userId=1abc&id=1&id=2&id=3

The signature of the Web API method:

[HttpGet("products")]
public IActionResult GetProducts(string userId, int[] id)

If I try the request with Postman the binding of the parameters works correctly. In the Javascript app I tried several solutions with no luck. The code is as follows:

let data = {
  'userId': '1abc'
  'id': [1,2,3]
}

$.ajax({
   type: 'get',
   url: 'http://my.services.com/products',
   data: data,
   crossDomain: true, //CORS
   cache: false,
}

In this case the URL becomes:

http://my.services.com/products?userId=1abc&id%5B%5D=1&id%5B%5D=2&id%5B%5D=3

since in the parsed result instead of using id as key, it uses id[], therefore codifies the characters [] as %5B and %5D.

No luck even if I use this code:

let data = {
  'userId': '1abc'
  'id': JSON.stringify([1,2,3])
}

or (as seen in this answer)

let data = {
  'userId': '1abc'
  'id[]': [1,2,3]
}

Keep in mind that for the other calls the code JQuery AJAX code above works without any issue.

Rory McCrossan · Accepted Answer · 2018-08-29 09:49:04Z

18

The problem with the request is because the default ASP.Net model binder expects arrays to be sent through the querystring as separate key/value pairs, as your first example URL shows.

To achieve this you simply need to set traditional: true in your jQuery $.ajax() request:

let data = {
  userId: '1abc'
  id: [ 1, 2, 3 ]
}

$.ajax({
  type: 'get',
  url: 'http://my.services.com/products',
  data: data,
  traditional: true
});

Also, as a side note, be wary of using absolute URLs when making AJAX requests, you can easily encounter CORS issues if the code isn't maintained routinely. I'd suggest using relative paths where possible.

edited Aug 29, 2018 at 9:49

answered Aug 29, 2018 at 9:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

4 Comments

CiccioMiami Over a year ago

Thanks for your solution, it works, I didn't know about this traditional parameter. I edited my question since the syntax issue was a typo I made during the copy/pasting the code.

Rory McCrossan Over a year ago

No problem, glad to help. I removed the note about the syntax :)

Hermann Schwarz Over a year ago

Note for all the people use other backends (like Drupal, PHP): use traditional: false (default).

Itération 122442 Over a year ago

For those wondering what traditional is for like me: api.jquery.com/jQuery.param

Collectives™ on Stack Overflow

How to pass an array as a querystring in a GET request by using JQuery AJAX

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related