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

If you are facing AngularJS specific serialization problem, then httpParamSerializerJQLike is what you need. Take a look at http://stackoverflow.com/questions/33852190/angularjs-get-ajax-call-with-array-parameters — VivekDev, Nov 24 '15 at 04:49

score 78 · Answer 1 · answered Sep 18 '14 at 19:41

78

You can also just do

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

as mentioned here. Seems simpler.

answered Sep 18 '14 at 19:41

Ignacio Valdivieso

1,181
8
5

3

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. – sffc Nov 08 '14 at 16:30
1

This is the easiest way to communicate with PHP. It's giving the same result as a standard `form` would. – soyuka Nov 28 '14 at 13:46
Best answer yet. I'm able to manipulate the `body of the request` on the backend with Node. – AllJs Apr 21 '16 at 21:16
This only worked with my WebApi2 server after I decorated the array parameter like so: public HttpResponseMessage MyMethod([FromUri] int[] IDs) – CAK2 May 10 '18 at 03:41

score 62 · Accepted Answer · answered Jan 22 '14 at 15:31

62

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

answered Jan 22 '14 at 15:31

Saad Ahmed

1,077
9
9

8

I like this answer more than mine. – Jonathan Rowny Mar 04 '14 at 22:02
2

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 – Sonic Soul May 01 '15 at 20:41
Neither does it work for me. also have my own Web API backend. Did you get it working @SonicSoul – Vucko Jun 11 '16 at 23:20
3

This does NOT send a request formatted as asked in the question which is /items?id[]=1&id[]=2&id[]=3&id[]=4 – Adrien Jan 05 '17 at 18:40

score 10 · Answer 3 · answered Mar 29 '14 at 17:20

10

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
}

answered Mar 29 '14 at 17:20

Varun Nath

5,570
3
23
39

1

`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` – punkrockpolly Nov 05 '15 at 21:38
@stensrud the question specifically talks about an array of integer ids. – Wtower Apr 20 '17 at 09:15

score 5 · Answer 4 · answered Nov 13 '13 at 15:40

5

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

answered Nov 13 '13 at 15:40

Jonathan Rowny

7,588
1
18
26

I know it is valid, I just wanted to avoid the conversion. – Gio Polvara Nov 13 '13 at 15:46
$.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. – Jonathan Rowny Nov 13 '13 at 15:48
1

Yes you're right with $.param() it is working. Thanks for the help. – Gio Polvara Nov 13 '13 at 15:52

score 1 · Answer 5 · edited Sep 15 '16 at 15:42

1

you can use $httpParamSerializer or $httpParamSerializerJQLike

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

edited Sep 15 '16 at 15:42

Justin Morgan - On strike

30,035
12
80
104

answered Jul 12 '16 at 07:19

Ben Hsieh

340
1
8

Unless you're using e.g. CoffeeScript, this is invalid JS. Did you mean to omit the `{}` braces? – Justin Morgan - On strike Sep 15 '16 at 15:40

score 1 · Answer 6 · answered Sep 08 '16 at 13:13

1

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

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

answered Sep 08 '16 at 13:13

Lewis

3,375
3
29
26

score 0 · Answer 7 · answered Jul 16 '16 at 15:23

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

Send array via GET request with AngularJS' $http service

7 Answers7

Linked