如何使用 jQuery 访问从 API 返回的数据

Posted 2023-05-08

【中文标题】如何使用 jQuery 访问从 API 返回的数据

【英文标题】：How to access data returned from an API using jQuery

【发布时间】：2021-08-24 17:45:42

【问题描述】：

我正在向 API 发出 AJAX GET 请求，该 API 返回我所在地区提供快递的所有商店。我需要检查数据以查看该地区是否有任何商店提供快递但无法正确访问数据以执行任何检查并且不明白为什么。

从 API 返回的数据的精简版本在这里：

"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."

我用来获取数据的调用：

                $.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);
                                       
                    
                    
                )

到目前为止，数据正在记录到控制台。但是当我尝试访问它或我想使用的部分时，我得到了控制台错误。

我尝试从控制台复制属性路径并在 console.log 中使用它： console.log(data.service_eligibility[0].accesspoint_list) 但收到错误消息： Cannot read property '0' of undefined

我只试过data.service_eligibility，但这只是给我undefined的错误

事实上，即使我只是尝试访问data.currency，我也会得到undefined

为什么我无法访问从 API 返回的数据？

【问题讨论】：

***.com/questions/3302702/…

***.com/questions/14220321/…

试试：data.data.service_eligibility[0].accesspoint_list

那行得通，为什么我必须输入data.data？

因为返回响应在 data 变量内，而您的 accesspoint_list 嵌套如下：data > service_eligibility > accesspoint_list

【参考方案1】：

                   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);
                       
                   

查看您提供的上述代码，您在成功处理程序中接收到的data 对象并不直接引用您收到的响应中的data 对象。由于名称相同，因此可能会造成混淆。 我认为如果您尝试使用data.data.service_eligibility 访问data 对象内的属性，您将能够访问它。为了更清楚，请参见下面的代码：

                    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);

                      
                    

想想看，如果你的数据在success handler里面是可用的，就说明从api获取数据的异步动作已经成功完成了。您可以只调试数据对象的结构，并找出在访问值的方式中缺少什么或有什么问题。人们可以表现不同，代码永远不会！ :)

【讨论】：

这实际上非常有用，所以我调用了我的响应数据？

是的，尝试使用与上面相同的代码，或者在成功处理程序中可用时尝试 console.log(response)。然后您可以看到您的响应本身的清晰结构。您还可以在成功处理程序的第一行放置一个断点，然后在浏览器控制台中，您将获得响应。然后，您可以根据自己的回复来寻找正确的数据路径。