Send array via GET request with AngularJS' $http service
JavascriptHttpAngularjsAngular HttpJavascript Problem Overview
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})
)
Javascript Solutions
Solution 1 - Javascript
You can also just do
$http(
method: 'GET',
url: '/items',
params: {
"id[]": ids // ids is [1, 2, 3, 4]
}
)
as mentioned here. Seems simpler.
Solution 2 - Javascript
$http(
method: 'GET',
url: '/items',
params: {
id: JSON.stringify(ids) // ids is [1, 2, 3, 4]
}
)
Solution 3 - Javascript
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
}
Solution 4 - Javascript
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().
Solution 5 - Javascript
you can use $httpParamSerializer or $httpParamSerializerJQLike
$http({
method: 'GET',
url: '/items',
data: $httpParamSerializer({'id':[1,2,3,4]}),
})
Solution 6 - Javascript
The paramSerializer option can be set to replicate jQuery's serialization method:
$http({
url: myUrl,
method: 'GET',
params: myParams,
paramSerializer: '$httpParamSerializerJQLike'
});
Solution 7 - Javascript
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)
{
}