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

Changing the Color of an Object3D Mesh in Three.js

Recognizing a component through various page loads

"Utilize the await/async and promise functions to pause and wait for a code to

Unable to transmit information back to React

IntelliJ does not support the use of newlines within Vue.js component templates

Combining Java for the back-end and JavaScript for the front-end: a comprehensive guide

How can one transfer information from a client to a server and complete a form using JavaScript?

Setting up a React Package by reinstalling a git repository

Using EJS to Render a Function Expression?

What is the best way to keep an image centered in the nav-bar as it decreases in size?

Web Page Content Scrambling/Character Exchange

What are the necessary requirements for utilizing JSON Diff in a document or project?

Is there a simpler method to examine scope in Angular when debugging?

Developing New Arrays from JSON Responses using AngularJS

Managing null values in a map using Jackson

Is there a way to retrieve JSON data from a specific URL and assign it to a constant variable in a React application?

Apply SetTimeout exclusively for desktop devices

Incorporate extra padding for raised text on canvas

Creating dynamic <a> tags using JavaScript

Save this page for later by using JavaScript to create a