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?

because return response is inside data variable and your accesspoint_list is nested like this : data > service_eligibility > accesspoint_list — Swati
– Swati, Commented Jun 7, 2021 at 16:34

SaloniMishra · Accepted Answer · 2021-06-07 16:19:55Z

2

                   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! :)

answered Jun 7, 2021 at 16:19

SaloniMishra

1946 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shane Muirhead Over a year ago

This is actually really useful, so I'd called my repsonse data?

SaloniMishra Over a year ago

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.

Collectives™ on Stack Overflow

How to access data returned from an API using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related