Send array via GET request with AngularJS' $http service

Question

I need to send a GET request using the $http service. One of the parameters will be an array of ids. The url looks like this one mysite.com/items?id[]=1&id[]=2&id[]=3&id[]=4

I tried this approach

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids // ids is [1, 2, 3, 4]
  }
)

but the url I obain is mysite.com/items?id=%5B%221%22%2C%222%22%2C%223%22%2C%224%22%5D

That's Because Angular is converting my value in a JSON string. Is there a way to get the behavior I want?

[Update]

I solved the issue thanks to Jonathan's suggestion using jQuery's $.param().

$http(
  method: 'GET'
  url: '/items?' + $.param({id: ids})
)

Boysenberry

If you are facing AngularJS specific serialization problem, then httpParamSerializerJQLike is what you need. Take a look at #33852690 – Redcap

Answer 1

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: JSON.stringify(ids) // ids is [1, 2, 3, 4]
  }
)

Afrikander

I like this answer more than mine. – Throe

none of these approaches appear to work for me so far with WebApi back end. tried JSON.stringify, 'myvariable[]', going to try a manual string join next – Quarterdeck

Neither does it work for me. also have my own Web API backend. Did you get it working @SonicSoul – Cesta

This does NOT send a request formatted as asked in the question which is /items?id[]=1&id[]=2&id[]=3&id[]=4 – Unsuccess

Answer 2

You can also just do

$http(
  method: 'GET',
  url: '/items',
  params: {
    "id[]": ids // ids is [1, 2, 3, 4]
  }
)

as mentioned here. Seems simpler.

Pillsbury

I like this method because on the back end (e.g. PHP), the parameter is automatically parsed as an array, avoiding the additional code step of decoding JSON. – Tactic

This is the easiest way to communicate with PHP. It's giving the same result as a standard form would. – Houseless

Best answer yet. I'm able to manipulate the body of the request on the backend with Node. – Islas

This only worked with my WebApi2 server after I decorated the array parameter like so: public HttpResponseMessage MyMethod([FromUri] int[] IDs) – Citriculture

Answer 3

jQuery is great but if your adding jQuery just for this then you could probably do with a non jQuery way and save some precious bytes.

Non jQuery way :

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids.toString() //convert array into comma separated values
  }
)

On your server convert it back to an array.

Eg. in php

$ids = explode(',',Input::get('ids'));

//now you can loop through the data like you would through a regular array. 

foreach($ids as $id)
{
 //do something
}

Donoho

ids.toString() is exactly what I wanted. The other suggestions weren't serializing it into one correct query param in the format I needed: ?id=1,3,4,5 – Cis

@stensrud the question specifically talks about an array of integer ids. – Lekishalela

Answer 4

This is valid, just decode it on your backend. Almost all backend languages have a way to decode a URI. If you don't like the way that Angular is serializing it, you can try jquery's $.param().

Throe

I know it is valid, I just wanted to avoid the conversion. – Boysenberry

$.param() should give you a slightly different structure once decoded, more like what you want. You can't not encode URIs, it's not optional. If you don't do it, the browser will. – Throe

Yes you're right with $.param() it is working. Thanks for the help. – Boysenberry

Answer 5

you can use $httpParamSerializer or $httpParamSerializerJQLike

$http({
  method: 'GET',
  url: '/items',
  data: $httpParamSerializer({'id':[1,2,3,4]}),
})

Debbradebby

Unless you're using e.g. CoffeeScript, this is invalid JS. Did you mean to omit the {} braces? – Famulus

Answer 6

The paramSerializer option can be set to replicate jQuery's serialization method:

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});

Pestilence

Answer 7

As long as you don't have too many ids, which will cause your request url to be too long depending on your configuration, the following solution will work...

Angular Service:

$http.get("website.com/api/items?ids=1&ids=2&ids=3");

WebApi Controller

[HttpGet, Route("api/items")]
public IEnumerable<Item> Get([FromUri] string[] ids)
{
}

Graecoroman