CODEWITHSUNDEEP
javascriptjqueryarraysjsonapi
Shane Muirhead
Shane Muirhead

Reputation: 115

How to access data returned from an API using jQuery

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?

Upvotes: 1

Views: 944

Answers (1)

SaloniMishra
SaloniMishra

Reputation: 194

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

Upvotes: 2

Related Questions