$http.post request not working in angularJS?

Question

This question has been answered severeal time on this site but none of them are helping. So I ask again:

When I make a POST request like this :

var sectionTypeVM = new Object();
        sectionTypeVM.SectionTypeId = 0;
        sectionTypeVM.Name = $scope.message;
        $http({
            method: 'POST',
            url: 'http://mtapi.azurewebsites.net/api/sectiontype',
            dataType: 'json',
            data: sectionTypeVM,
            headers: { 'Content-Type': 'application/json; charset=UTF-8' }
        }).success(function (data) {
            alert(data);
        }).error(function (data) {
            alert(data);
        });

it works perfectly fine, but when I try to do something like this:

        $http({
            method: 'POST',
            url: 'http://mtapi.azurewebsites.net/api/sectiontype',
            dataType: 'json',
            data: $scope.message,
            headers: { 'Content-Type': 'application/json; charset=UTF-8' }
        }).success(function (data) {
            alert(data);
        }).error(function (data) {
            alert(data);
        });

it doesn't. Why I need to create a separate object the javascript way and send it, why my angularJS object cannot be posted directly (they look same ) ? Is it a server side error or what ? A explanation will be helpful.

nopes. server simply returns false. on console its either error 500 or sometimes error from 200 series — Moose
– Moose, Commented Jun 14, 2014 at 7:23

jgawrych · Accepted Answer · 2014-06-14 07:47:30Z

2

The main difference between your 2 posts is that the first sends back an object with two fields (Name and SectionTypeId), while the second only sends back the contents of $scope.message. ~~I could be wrong, but it looks like $scope.message is a string. However, you are setting the content-type to application/json.~~

The difference between the two is the first post sends this object:

{
    SectionTypeId: 0,
    Name: [
        {"name"="abc", "id"="1"},
        {"name"="bcd", "id"="2"}
    ]
}

While the second post sends this array:

[
    {"name"="abc", "id"="1"},
    {"name"="bcd", "id"="2"}
]

You need to either restructure your code so that $scope.message is a valid json object that your server accepts or wrap $scope.message in an object like your first example.

edited Jun 14, 2014 at 7:47

answered Jun 14, 2014 at 7:27

jgawrych

3,6001 gold badge31 silver badges41 bronze badges

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

3 Comments

Moose Over a year ago

$scope.message looks like this = [{"name"="abc", "id"="1"},{"name"="bcd", "id"="2"}], so isn't it JSON enough ? infact if I print the object from code sample 1 , it looks exactly like my $scope.message. also do i need to do "data|JSon" to make it work ?

Moose Over a year ago

so if this is the case, 2nd one should also work. but it doesnot, that's my issue ?

jgawrych Over a year ago

I modified my answer and I hope it explains why you are getting the error. While there is nothing wrong with sending an array in a post, I believe your server is expecting an object instead

Michael Kang · Accepted Answer · 2014-06-14 08:23:37Z

2

The first is sending sectionTypeVM which is a JavaScript object, the second is sending $scope.message which, I'm presuming is a string assigned from sectionTypeVM.Name. The two are not identical.

Although var sectionTypeVM = new Object() is the same as var sectionTypeVM = {} in this simple example, the latter more clearly demonstrates the intent that sectionTypeVM is an object literal. Since you are sending JSON to the server, the object literal notation should be preferred.

I am assuming $scope.message is just a string (or an array). The reason the second example does not work is likely because $scope.message is not an object literal, and you have specified json as the expected data format. Object literals must follow the format:

var sectionTypeVM = {
      property: 'foo',
      property: 'bar'
};

If you wanted to modify your second example so that it works, you could change your data payload to object literal notation:

   $http({
        method: 'POST',
        url: 'http://mtapi.azurewebsites.net/api/sectiontype',
        dataType: 'json',
        data: { Name: $scope.message },
        headers: { 'Content-Type': 'application/json; charset=UTF-8' }
    })

edited Jun 14, 2014 at 8:23

answered Jun 14, 2014 at 7:54

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

3 Comments

Moose Over a year ago

But both of them should work , shouldnt they ? or is it a server issue. arent they both sending json object ? in respect to What you updated afterwards, $scope.message should work then. Because it is a json object.

Michael Kang Over a year ago

Correct. They are the same for simple objects.

Moose Over a year ago

I Just want to know that,if both of them are correct, depending on what my server is expecting ? is it ?

aikutto · Accepted Answer · 2014-06-14 07:41:28Z

1

If your server accpets first request you can post like this

    $http({
        method: 'POST',
        url: 'http://mtapi.azurewebsites.net/api/sectiontype',
        dataType: 'json',
        data: {SectionTypeId:0, Name: $scope.message},
        headers: { 'Content-Type': 'application/json; charset=UTF-8' }
    }).success(function (data) {
        alert(data);
    }).error(function (data) {
        alert(data);
    });

answered Jun 14, 2014 at 7:41

aikutto

5922 gold badges8 silver badges22 bronze badges

7 Comments

Moose Over a year ago

$scope.message has both id and name in it like this : [{"name"="abc", "id"="1"},{"name"="bcd", "id"="2"}], so can't I just do, data:{$scope.message}; ?

Moose Over a year ago

i did, earlier it want accepting either of them. my main issue is, if both of them are json enough why is one working and other not. ?

Moose Over a year ago

I Just want to know that,if both of them are correct, depending on what my server is expecting .

aikutto Over a year ago

because your data is compatible with only one of server side object that your server accepts. i.e. if your server accepts List<string> messages = ParseStringList(jsonData); and if your code could not parse data to another object like Dictionary<int, string> messages = ParseStringList(jsonData); it gives a server side error.

aikutto Over a year ago

if your message object is {"name"="abc", "id"="1"}, it's not valid JSON Object. use {"name":"abc", "id":"1"} instead of {"name"="abc", "id"="1"}

|

Collectives™ on Stack Overflow

$http.post request not working in angularJS?

3 Answers 3

3 Comments

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related