current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 36 down vote favorite
6

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})
)
share|improve this question
    
If you are facing AngularJS specific serialization problem, then httpParamSerializerJQLike is what you need. Take a look at stackoverflow.com/questions/33852190/… – VivekDev Nov 24 '15 at 4:49
up vote 47 down vote accepted 
$http(
  method: 'GET',
  url: '/items',
  params: {
    id: JSON.stringify(ids) // ids is [1, 2, 3, 4]
  }
)
share|improve this answer
5  
I like this answer more than mine. – Jonathan Rowny Mar 4 '14 at 22:02
1  
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 1 '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 at 23:20
up vote 57 down vote

You can also just do

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

as mentioned here. Seems simpler.

share|improve this answer
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 8 '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, works with rails too. – madeinstefano Nov 6 '15 at 17:44
    
Best answer yet. I'm able to manipulate the body of the request on the backend with Node. – AllJs Apr 21 at 21:16
    
This finally worked for me! :D thanks sir – Vucko Jun 14 at 14:07
up vote 6 down vote

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
}
share|improve this answer
    
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 5 '15 at 21:38
    
Just hope that the values themselves doesn't include a comma... – stensrud Mar 21 at 8:14
up vote 5 down vote

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

share|improve this answer
    
I know it is valid, I just wanted to avoid the conversion. – Gpx 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. – Gpx Nov 13 '13 at 15:52
up vote 1 down vote

you can use $httpParamSerializer or $httpParamSerializerJQLike

$http({
  method: 'GET',
  url: '/items',
  data: $httpParamSerializer({'id':[1,2,3,4]}),
})
share|improve this answer
    
Unless you're using e.g. CoffeeScript, this is invalid JS. Did you mean to omit the {} braces? – Justin Morgan Sep 15 at 15:40
up vote 0 down vote

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)
{
}
share|improve this answer
up vote 0 down vote

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

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.