Angular JS POST request not sending JSON data

Question

I am trying to send an object as JSON to my webservice in Flask that is expecting JSON in the request data.

I have tested the service manually by sending JSON data and it works fine. However, when I try to make a http POST request through angular controller, the web server sends me a message saying it did not receive JSON.

When I inspect the request headers in Chrome it appears that data is not being sent in JSON but regular key/value pairs even through the Content Type is set to application/json

Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:49
Content-Type:application/json;charset=UTF-8
DNT:1
Host:localhost:5000
Origin:http://localhost:5000
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
application=AirFare&d1=10-APR-2013&d2=14-APR-2013

If you seen the last line below Request Payload, you can see the data is not in JSON format.

This is the HTTP POST call in my angular controller:

$http({
            url: '/user_to_itsr',
            method: "POST",
            data: {application:app, from:d1, to:d2},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
                $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
            }).error(function (data, status, headers, config) {
                $scope.status = status + ' ' + headers;
            });
};

I am sending the data as an object {} but I have tried to send it after serializing by JSON.stringify however, nothing I do seems to send JSON to the server.

Really appreciate if somebody can help out.

$http POST sends its data by default as JSON encoded. Try removing headers from your $http call. It's possible that you are overwriting the default headers and that this leads to unexpected results on the server. You can also post your request headers to double-check. — Narretz
– Narretz, Commented Jul 9, 2013 at 12:10
@smartexpert did u find the solution? i have the same problem, i try alot to find a solution for it but i can't, if u find the solution plz help me. thanks alot — pmn
– pmn, Commented Feb 9, 2017 at 18:57

Phi · Accepted Answer · 2016-01-01 04:17:56Z

49

If you are serializing your data object, it will not be a proper json object. Take what you have, and just wrap the data object in a JSON.stringify().

$http({
    url: '/user_to_itsr',
    method: "POST",
    data: JSON.stringify({application:app, from:d1, to:d2}),
    headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
    $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
}).error(function (data, status, headers, config) {
    $scope.status = status + ' ' + headers;
});

edited Jan 1, 2016 at 4:17

Phi

831 silver badge13 bronze badges

answered Jul 9, 2013 at 18:58

rGil

3,7291 gold badge24 silver badges30 bronze badges

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

1 Comment

JohnAllen Over a year ago

My problem was I had data: {someVar: JSON.stringify(myVar)}, not what's in this answer.

Herman Kan · Accepted Answer · 2013-10-10 11:56:45Z

10

I have tried your example and it works just fine:

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/test',
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    data: {application: app, from: d1, to: d2}
});

Output:

Content-Length:91
Content-Type:application/json
Host:localhost:1234
Origin:http://localhost:1234
Referer:http://localhost:1234/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{"application":"AirFare","from":"2013-10-10T11:47:50.681Z","to":"2013-10-10T11:47:50.681Z"}

Are you using the latest version of AngularJS?

answered Oct 10, 2013 at 11:56

Herman Kan

2,2921 gold badge26 silver badges34 bronze badges

Comments

monkey · Accepted Answer · 2014-05-09 14:12:26Z

2

You can use FormData API https://developer.mozilla.org/en-US/docs/Web/API/FormData

var data = new FormData;
data.append('from', from);
data.append('to', to);

$http({
    url: '/path',
    method: 'POST',
    data: data,
    transformRequest: false,
    headers: { 'Content-Type': undefined }
})

This solution from http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

answered May 9, 2014 at 14:12

monkey

1,28114 silver badges15 bronze badges

Comments

Shohel · Accepted Answer · 2014-08-12 03:41:00Z

2

you can use your method by this way

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/apiControllerName/methodName',
    method: 'POST',
    params: {application:app, from:d1, to:d2},
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    //timeout: 1,
    //cache: false,
    //transformRequest: false,
    //transformResponse: false
}).then(function (results) {
    return results;
}).catch(function (e) {

});

answered Aug 12, 2014 at 3:41

Shohel

3,9645 gold badges41 silver badges80 bronze badges

2 Comments

theRemix Over a year ago

should be data: not params:

Andrew Gans Over a year ago

I think this is the correct answer. All others do not work if you need to have several @RequestParams

irakli2692 · Accepted Answer · 2016-05-04 15:13:11Z

0

try to use absolute url. if it not works, check if service's response has headers:

Access-Control-Allow-Origin and Access-Control-Allow-Headers

for example:

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

answered May 4, 2016 at 15:13

irakli2692

1372 silver badges9 bronze badges

Comments

Brian · Accepted Answer · 2015-02-12 05:44:19Z

-1

you can use the following to find the posted data.

data = json.loads(request.raw_post_data)

answered Feb 12, 2015 at 5:44

Brian

112 bronze badges

Comments

destino · Accepted Answer · 2016-10-24 20:22:25Z

-1

$http({
    url: '/api/user',
    method: "POST",
    data: angular.toJson(yourData)
}).success(function (data, status, headers, config) {
    $scope.users = data.users;
}).error(function (data, status, headers, config) {
    $scope.status = status + ' ' + headers;
});

answered Oct 24, 2016 at 20:22

destino

573 bronze badges

Collectives™ on Stack Overflow

Angular JS POST request not sending JSON data

7 Answers 7

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related