Problems send Javascript Array to Web API method using GET

Question

I'm using AngularJS $http to send data to my Web API server. If I use the GET method the array will be null on the server. Using the POST method all works fine. What is the correct way to send array using the GET method?

----GET----

Client-Side:

     $http({
       method: 'GET',
       url: '/api/Status',
       headers: { 'Authorization': $localStorage.accesstoken },
       data: statusID
     })

Server-Side:

    [HttpGet]
    public async Task<List<StatusForUpdate>> GetStatus([FromUri] List<int> StatusID)
    { ... }

----POST----

Client-Side:

     $http({
       method: 'POST',
       url: '/api/Status',
       headers: { 'Authorization': $localStorage.accesstoken },
       data: statusID
     })

Server-Side:

    [HttpPost]
    public async Task<List<StatusForUpdate>> GetStatus(List<int> StatusID)
    { ... }

Answer 1

Firstly, using data is not correct with GET, use params instead

Unfortunately, with this code:

var statusID = [1, 2];
  $http({
       method: 'GET',
       url: '/api/Status',
       headers: { 'Authorization': $localStorage.accesstoken },
       params: statusID
   })

Angular will send a url like this: http://server.com/api/Status?0=1&1=2

But that format does not match with web api default expected format, which is:

http://server.com/api/Status?StatusID=1&StatusID=2

Try this instead:

var statusID = [1, 2];
      $http({
           method: 'GET',
           url: '/api/Status',
           headers: { 'Authorization': $localStorage.accesstoken },
           params: {StatusID:statusID}
       })

Remember to update your angular to version >= 1.2.0, for versions 1.0.x, the url will look like this:

http://server.com/api/Status?StatusID=%5B1%2C2%5D

If you're using an old angular version and you're not willing to upgrade yet, just handcraft your url to send to web api.