$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.

Answer 1

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.

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

Answer 3

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