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})
)

Answer 1

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

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.

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
}

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().

Answer 5

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

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

Answer 6

you can use $httpParamSerializer or $httpParamSerializerJQLike

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

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)
{
}