How can I send parameters in my http request using AngularJS?

Question

I am using the following code:

$http({
    method: 'GET',
    url: '/Admin/GetTestAccounts',
    data: { applicationId: 3 }
}).success(function (result) {
    $scope.testAccounts = result;
});

The code sends the following to my server:

http://127.0.0.1:81/Admin/GetTestAccounts

When this is received by my MVC controller:

[HttpGet]
public virtual ActionResult GetTestAccounts(int applicationId)
{
    var testAccounts =
        (
            from testAccount in this._testAccountService.GetTestAccounts(applicationId)
            select new
            {
                Id = testAccount.TestAccountId,
                Name = testAccount.Name
            }
        ).ToList();

    return Json(testAccounts, JsonRequestBehavior.AllowGet);
}

It complains that there is no applicationId.

The parameters dictionary contains a null entry for parameter 'applicationId' of non-nullable type 'System.Int32' for method

Can someone explain why the applicationId is not being sent as a parameter? Previously I was doing this with the following non-Angular code and it worked just fine:

$.ajax({
    url: '/Admin/GetTestAccounts',
    data: { applicationId: 3 },
    type: 'GET',
    success: function (data) {
        eViewModel.testAccounts(data);
    }
});

@Dave - I saw the link you gave me and I am even more confused now :-( — Alan2
– Alan2, Commented Mar 29, 2013 at 16:36
look at url being used in browser console network tab.. what does it look like? — charlietfl
– charlietfl, Commented Mar 29, 2013 at 16:36
@Gemma have you tried using jQuery param $.param({ applicationId: 3 })? — davekr
– davekr, Commented Mar 29, 2013 at 17:52
why dont you append application id directly to url in query string — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Mar 29, 2013 at 17:55

Lucas Raines · Accepted Answer · 2013-06-27 23:41:54Z

31

If you don't want to use jQuery's $.param you can use $http's param field which serializes an object.

var params = {
    applicationId: 3
}

$http({
    url: '/Admin/GetTestAccounts',
    method: 'GET',
    params: params
});

answered Jun 27, 2013 at 23:41

Lucas Raines

1,3153 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ryan Schumacher Over a year ago

This is angularjs' implementation github.com/angular/angular.js/blob/master/src/ng/http.js#L1011

Nikolaj Dam Larsen Over a year ago

The url encoding of the params cause trouble for me when Date objects are involved. The serialization pads the Date with the character '%22' (double-quote), which results in the modelbinder of WebAPI/MVC failing to deserialize the Date.

DanB Over a year ago

I've filed an issue on Github for this github.com/angular/angular.js/issues/8150

DanB Over a year ago

This is fixed in 1.3.16

Sergey Kandaurov Over a year ago

This was not fixed for Moment.js. So be sure to use .toDate() if you use it.

davekr · Accepted Answer · 2013-03-29 18:04:26Z

3

Ok, I will try to answer this.

I think the problem is that angularjs presume that data passed to http will be urlencoded. I am not sure why angular doesn't serialize it implicitly if there's an object. So you have to encode it yourself:

 $http({
       method: 'GET',
       url: '/Admin/GetTestAccounts',
       data: 'applicationId=3'
       })

or use jQuery param to encode it for you:

$http({
     method: 'GET',
     url: '/Admin/GetTestAccounts',
     data: $.param({ applicationId: 3 })
     })

answered Mar 29, 2013 at 18:04

davekr

2,2761 gold badge27 silver badges32 bronze badges

5 Comments

Ryan Schumacher Over a year ago

jQuery's implementation: github.com/jquery/jquery/blob/… Angular's implementation: github.com/angular/angular.js/blob/master/src/ng/http.js#L1011

Ryan Schumacher Over a year ago

Based on their discussion of angular.extend() I would guess they don't like to implement deep copy and the like.

Ryan Schumacher Over a year ago

Equally, you could implement a shallow API query design or use JSON requests

FirstVertex Over a year ago

You don't use data in a GET request, you use params

Ketav Over a year ago

Getting Error: $ is not defined near $.param

Collectives™ on Stack Overflow

How can I send parameters in my http request using AngularJS?

2 Answers 2

5 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Linked

Related