How to access data returned from an API using jQuery

Question

I'm doing an AJAX GET request to an API that returns all stores in my area that offer express delivery. I need to check over the data to see if any store in the area offer express delivery but can't access the data properly to perform any check's and don't understand why.

A stripped back version of the data returned from the API is here:

{
"data": {
"service_eligibility": [
{
"accesspoint_list": [
{
"current_time": null,
"currency": null,
"accesspoint_id": "3242342-6dc1-43d8-b3d0-234234234234",
"service_info": {
"fulfillment_type": "DELIVERY",
"reservation_type": "SLOTS",
"dispense_type": "DELIVERY",
"priority": 0,
"carrier": "Owned",
"fulfillment_option": "DELIVERY",
"location_type": "Home",
"service_time": 0,
"is_recurring_slot": false,
"enable_express": false,
"is_unattended_slot": true,
"is_flex_slot": false
},
{
"current_time": null,
"currency": null,
"accesspoint_id": "234234242-3387-4e1d-9eaa-234234242",
"service_info": {
"fulfillment_type": "INSTORE_PICKUP",
"reservation_type": "SLOTS",
"dispense_type": "PICKUP_INSTORE",
"priority": 0,
"carrier": "NA",
"fulfillment_option": "PICKUP",
"location_type": "Store",
"service_time": 0,
"is_recurring_slot": false,
"enable_express": true,
"is_unattended_slot": false,
"is_flex_slot": false
},
"current_time": "2021-06-07T11:24:39Z",
"currency": "GBP"
},
"status_code": 200,
"status_message": "Requested input executed successfully."
}

The call I use to get my data:

                $.ajax({
                    type: 'GET',
                    dataType: "json",
                    url: query,
                    data: "",
                    success: function(data)
                    {
                        //Check for express delivery
                        if(data.status_code == 200) {
                            console.log(data);
                        }
                    },
                    error: function(data)
                    {
                        //Check for API error
                        if(data.status == 400){
                            console.log(data.responseJSON.errors[0].message);
                        }               
                    
                    }
                })

So far the data is being logged to the console. But when I try to access it or parts I want to use I get console errors.

I have tried copying the property path from the console and using it in the console.log: console.log(data.service_eligibility[0].accesspoint_list) but get the error message: Cannot read property '0' of undefined

I have tried just data.service_eligibility but this just give me the error of undefined

In fact even if I just try to access data.currency I get undefined

Why can I not access the data being returned from the API?

https://stackoverflow.com/questions/3302702/jquery-return-value-using-ajax-result-on-success — epascarello, Jun 07 '21 at 16:08
https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — epascarello, Jun 07 '21 at 16:08
because return response is inside `data` variable and your `accesspoint_list` is nested like this : `data > service_eligibility > accesspoint_list` — Swati, Jun 07 '21 at 16:34

score 2 · Accepted Answer · answered Jun 07 '21 at 16:19

                   type: 'GET',
                   dataType: "json",
                   url: query,
                   data: "",
                   success: function(data)
                   {
                       //Check for express delivery
                       if(data.status_code == 200) {
                        console.log(response.data.ervice_eligibility[0].accesspoint_list);
                       }
                   }

Looking at the above piece of code you have provided, it looks like, the data object that you are receiving in the success handler does not directly refer to the data object inside your received response. Given the names are same, it can be confusing. I think if you try accessing the property inside the data object using data.data.service_eligibility, you will be able to access it. For some more clarity, see the code below:

                    type: 'GET',
                    dataType: "json",
                    url: query,
                    data: "",
                    success: function(response)
                    {
                        //Check for express delivery
                        if(response.status_code == 200) {
                            console.log(response.data.service_eligibility[0].accesspoint_list);

                      }
                    }

Just think about it, if your data is available inside the success handler, it means that the asynchronous action of fetching the data from the api has successfully completed. You can just debug the structure of your data object and find out what's missing or what's wrong in the way you are accessing a value. People can behave differently, code can never! :)

This is actually really useful, so I'd called my repsonse data? — Shane Muirhead, Jun 07 '21 at 16:25
Yes, try using the same code as above or just try to console.log(response) once it is available inside the success handler. Then you can see the clear structure of your response itself. You can also put a breakpoint in the first line of the success handler, and then in your browser console, you will get a hold of your response. Then you can play around with your response to find the right path to your data. — SaloniMishra, Jun 07 '21 at 16:38

How to access data returned from an API using jQuery

1 Answers1