malformed JSON string Error while passing JSON from AngularJS

Question

I am trying to pass JSON string in ajax request. This is my code.

    NewOrder =  JSON.stringify (NewOrder);
    alert (NewOrder);

    var req = {
        url: '/cgi-bin/PlaceOrder.pl',
        method: 'POST',
        headers: { 'Content-Type': 'application/json'},
        data: "mydata="+ NewOrder
    };  

    $http(req)
    .success(function (data, status, headers, config) {
        alert ('success');
    })
    .error(function (data, status, headers, config) {
        alert (status);
        alert (data);
        alert ('Error')
    });

alert (NewOrder) gives -

{"ItemList":[{"ItemName":"Quality Plus Pure Besan 500 GM","Quantity":1,"MRP":"28.00","SellPrice":"25.00"}],"CustomerID":1,"DeliverySlot":2,"PaymentMode":1}

Which seems to be a valid JSON string.

But in script side I am getting following error. in this line

my $decdata = decode_json($cgi->param('mydata'));

malformed JSON string, neither array, object, number, string or atom, at character offset 0 (before "(end of string)")

Can please someone help me why i am getting this error?

Answer 1

$cgi->param('myData') returns the query param string 'mydata', which in your case is not sent.

You're posting the json data in the request body of your http post payload, and not as a query/form param. In that case, you'd need some other function to read the contents of the request body in your server-side script.

which happens to be: my $data = $query->param('POSTDATA');

as described in here: http://search.cpan.org/~lds/CGI.pm-3.43/CGI.pm#HANDLING_NON-URLENCODED_ARGUMENTS

Also you should remove the "mydata=" from your json in the body you post, because http request payload bodies do not have parameter names (they're for query/form-params only).

Your end code should be like this:

var req = {
    url: '/cgi-bin/PlaceOrder.pl',
    method: 'POST',
    headers: { 'Content-Type': 'application/json'},
    data: NewOrder
}; 

and the servers side:

my $decdata = decode_json($query->param('POSTDATA'));

Answer 2

I think it may be related to this issue: AngularJs $http.post() does not send data

Usually I would post data like this:

var req = {
    url: '/cgi-bin/PlaceOrder.pl',
    method: 'POST',
    headers: { 'Content-Type': 'application/json'},
    data: {"mydata" : NewOrder}
};  

However I am assuming that you are expecting the data as request params from this:

my $decdata = decode_json($cgi->param('mydata'));

If that is the case then the linked SO question is what you are looking for.

Answer 3

Angular $http.post accepts two params as url and payload

   var url = '/cgi-bin/PlaceOrder.pl';
   var payLoad = {'myData' :JSON.stringify(NewOrder)}; 

    $http.post(url, payLoad)
    .success(function(data) {
    console.log(success);
    })

At the server side, while fetching the required json string from the request param and then desearlize the json as following:

    $result = $cgi->param('myData');
    my $decdata = decode_json($result);