Javascript unable to display JSON value

I am submitting to a php file for processing the form and creating a json encoded response, but in the javascript code I am not able to retrieve the value for the key and is returning as undefined. If I print the result, I can see the array object returned as set in the php code. How can I return the key value in the javascript?

//json response set in php file

{"status":"some status","data":"some random data"}

//javascript - jquery code snippet
:
:
onSuccess: function (e) {
e.preventDefault();
var form_data = new FormData($('#form')[0]);
$.ajax({
    url: $('#form').attr('action'),
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: form_data,
    success: function (result) {
    alert(result.status);//returning as undefined 
        },
    error: function (xhr, status, error) {
        }
    });
}
:
:

I am expecting to get the value of status back when processing it from Javascript. I have set the json encoded response from the php and is received correctly in the result object as an array, but I am not able to print the value of the key status.

>Solution :

The issue is that the result you receive in the success callback is likely a JSON string and not a parsed JavaScript object. To access the status key, you need to parse the JSON string into a JavaScript object using JSON.parse. Alternatively, you can configure jQuery.ajax to automatically handle this for you.

Solution

1. Parse JSON Manually

You can manually parse the result using JSON.parse:

success: function (result) {
    var jsonResult = JSON.parse(result); 
},

2. Set dataType: ‘json’

You can configure jQuery.ajax to automatically parse the JSON response:

$.ajax({
    url: $('#form').attr('action'),
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: form_data,
    dataType: 'json', 
    success: function (result) {
        alert(result.status);
    },
    error: function (xhr, status, error) {
        console.error(error);
    }
});                                                                               

Ensure the PHP response sets the Content-Type header correctly to indicate JSON data:

header('Content-Type: application/json');
echo json_encode(["status" => "some status", "data" => "some random data"]);

With this setup, the status key will be accessible in your JavaScript code.