Unable to get data from api response using ajax call in Yii2

Question

I am sending are request from an API to get some data.

 $.ajax({
                    url: '$urlmsim',
                    method: 'POST',
                    headers: headers,
                    data: formData,
                    processData: false, // Prevent jQuery from processing the data
                    contentType: false, // Let the browser set the content type
                    success: function (imsi) {
                        // Handle and display the IMSI result
                        console.log(imsi);
                        
                        //$('#imsiResult').text('IMSI: ' + imsi);
                         //$('#metertosimmapping-imsi').val(imsi.msim_id);
                    },
                    error: function (error) {
                        console.error('MSIM API call failed: ' + JSON.stringify(error));
                    },
                    complete: function () {
                        // This function is called after the request is complete, whether it's successful or not
                        hideLoader(); // Hide the loader here
                    }   
                });

The call is successfully made and I am able to receive the response in an object I can see it in my console while doing console.log(imsi);. Below is the response

0: Object { global_device_id: "m98202315", msn: "2998202315", msim_id: "89410034222316193981" }

From the above response, I want to get msim_id. I am trying to get by following

console.log(imsi.msim_id); which gives me undefined

console.log(imsi[0].msim_id); which gives me Uncaught TypeError: imsi[0] is undefined

I have also tried the following

if (Array.isArray(imsi) && imsi.length > 0) {
var imsi_id = imsi[0].msim_id;
console.log(imsi_id);
} else {
console.log("imsi is not defined or is an empty array.");
}

But I am getting imsi is not defined or is an empty array.

How can I get the desired data from this response?

Any help would be highly appreciated.

Answer 1

You need to understand the structure of the server response in order to address the correct parameter within.

The response contains an Object with four keys:

{ data, message, transactionid, status }

This is a general response object that contains the requested information in the data key as well as some information about the response itself.

You are interested in the content of the data field which is of type Array, i.e. there could be zero to many objects inside. In your case it is very likely that you are always interested in the first Object in the data array if there is one. Here, there is one Object with three keys:

{ global_device_id, msn, msim_id }

So, the way through this hierarchy in order to retrieve the msim_id from your result, is

imsi.data[0].msim_id

If you rename your variables so that they better reflect this structure, and add some checks, you better get the idea:

success: function (result) { // the generic result comes in
    var data = result.data; // we are interested in the data
    var imsi = data[0]; // the first element should be the imsi

    if (typeof imsi === undefined) { // make sure it is 
        // no imsi in response
        return;
    }
    
    console.log(imsi.msim_id) // here it is
}