An issue occurred with a malformed JSON string when attempting to pass JSON data from AngularJS

Question

An issue occurred with a malformed JSON string when attempting to pass JSON data from AngularJS

I am facing an issue with passing a JSON string in an ajax request. Here is the code snippet:

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

The alert (NewOrder) displays:

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

This appears to be a valid JSON string.

However, I encountered an error on the server side while trying to decode the JSON string:

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

The error message received was: malformed JSON string, neither array, object, number, string or atom, at character offset 0 (before "(end of string)")

If anyone could help me understand why this error is occurring, it would be greatly appreciated.

javascript json angularjs perl

Answer 1

Answer №1

$cgi->param('myData') retrieves the query parameter string 'mydata', however, it seems that this specific data is not being sent in your case.

In your HTTP POST request payload, you are actually sending the JSON data within the body of the request, rather than as a query or form parameter. Therefore, you will require a different method to access and read the contents of the request body in your server-side script.

This can be achieved by using the following code snippet:


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

You can find more information about this approach here:

Additionally, make sure to exclude the "mydata=" segment from your JSON data in the request body, since HTTP request payloads do not include parameter names (they are only used for query and form parameters).

Your final updated code should look something like this:

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

On the server-side, you can use the following code to decode the JSON data:

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

Answer 2

$cgi->param('myData') retrieves the query parameter string 'mydata', however, it seems that this specific data is not being sent in your case.

In your HTTP POST request payload, you are actually sending the JSON data within the body of the request, rather than as a query or form parameter. Therefore, you will require a different method to access and read the contents of the request body in your server-side script.

This can be achieved by using the following code snippet:


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

You can find more information about this approach here:

Additionally, make sure to exclude the "mydata=" segment from your JSON data in the request body, since HTTP request payloads do not include parameter names (they are only used for query and form parameters).

Your final updated code should look something like this:

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

On the server-side, you can use the following code to decode the JSON data:

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

Answer 3

Answer №2

It seems like the issue might be connected to this particular problem: Why isn't AngularJs $http.post() sending data?

Typically, I would send data in the following way:

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

However, if you are expecting the data to come as request parameters from something like this:

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

In that case, the solution provided in the linked Stack Overflow question may be what you need.

Answer 4

It seems like the issue might be connected to this particular problem: Why isn't AngularJs $http.post() sending data?

Typically, I would send data in the following way:

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

However, if you are expecting the data to come as request parameters from something like this:

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

In that case, the solution provided in the linked Stack Overflow question may be what you need.

Answer 5

Answer №3

When using Angular's $http.post method, it requires two parameters: the url and the payload.

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

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

On the server side, we retrieve the necessary JSON string from the request parameter and then deserialize it like this:

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

Answer 6

When using Angular's $http.post method, it requires two parameters: the url and the payload.

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

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

On the server side, we retrieve the necessary JSON string from the request parameter and then deserialize it like this:

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

An issue occurred with a malformed JSON string when attempting to pass JSON data from AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to achieve consistent scrollY height values across various screen sizes?

Unforeseen outcomes of JavaScript when using the let and var keywords

Is there a way to automatically override the CSS cursor style?

What is the process for assigning a function and its arguments as a callback in programming?

What is the simplest method for converting a large JSON array of objects into an object containing the same data under the key "data" in TypeScript?

MySQL field being updated upon page unload

Tips on updating an HTML page following the receipt of a CURL request by a PHP script

Change the spread operator in JavaScript to TypeScript functions

Forward ReactJS

input value does not change when the "keyup" event is triggered

Issue with MaterialUI value prop not updating after dynamic rendering of components when value state changes

Dealing with errors in a sequelize ORM query: Tips and tricks

Ways to dynamically incorporate media queries into an HTML element

Tips for changing a specific item within an ng-repeat loop in AngularJS

Pagination displays identical data on each page

What is the best way to transfer data from an AJAX GET request to a Node.js GET route?

Understanding how to read a JSON response when the dataType is specifically set to JSONP

Steps for sending a form with jQuery's submit method1. Start

The .AppendChild() method does not appear to be working as expected following the completion of

Unable to generate a JSON formatted generic object