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

Solution 1

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

Solution 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.

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

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

Solution 5

you can use $httpParamSerializer or $httpParamSerializerJQLike

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

View more solutions

Comments

[Giorgio Polvara - Gpx]

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

[Jonathan Rowny]

$.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.

[Giorgio Polvara - Gpx]

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

[Jonathan Rowny]

I like this answer more than mine.

[sffc]

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.

[soyuka]

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

[Sonic Soul]

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

[punkrockpolly]

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

[AllJs]

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

[Vucko]

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

[Justin Morgan]

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

[Adrien]

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

[Wtower]

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

[CAK2]

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