javascript - 使用 jquery 在 HTML 表中追加行不起作用
问题描述
我正在使用for
循环在我的 HTML 表中追加多行jquery
。
for
循环(下面的代码)在ajax
返回的调用响应上运行array of arrays
。但无论否,只有 1 行被添加到表中。数组中的元素。
实际的响应对象非常大,所以我附上一个Google Drive 链接以供参考
如何追加表中的所有行?
代码片段(使用 Jquery)
$(document).ready(function() {
$('#ghsubmitbtn').on('click', function(e) {
var data = JSON.stringify(JSONObj);
$.ajax({
url: 'https://api-crt.cert.havail.sabre.com/v4.2.0/shop/flights?mode=live&limit=50&offset=1',
method: 'POST',
contentType: "application/json; charset=utf-8",
data: data,
headers: {
"Authorization": 'Bearer ' + bat
},
success: function(data) {
var BookBtn = '<input type="submit" value="Book" name="book" class="btn btn-primary">';
for (var v = 0; v <= 999; v++) {
for (var b = 0; b <= 999; b++) {
for (var m = 0; m <= 999; m++) {
var row = $('<tr><td>' + data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].SequenceNumber + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].OperatingAirline.Code + '</td><td>' +
BookBtn + '</td></tr>');
$('#tblData').append(row);
}
}
}
}
});
});
解决方案
问题
控制台中未定义 JSON 属性的 JSON 异常
解析度
在 JavaScript 中安全地访问深度嵌套的值
阅读本文以避免将来出现 JSON 异常。
更正
if (data && data.OTA_AirLowFareSearchRS && data.OTA_AirLowFareSearchRS.PricedItineraries && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m]) {
// Build row using nested JSON
}
PS 要快速调试,您必须始终检查browser console
以查找任何 JSON 异常。几乎 90% 的问题都可以通过显示的错误字符串得到解决。为了理解真正的问题,我做了同样的事情:)
推荐阅读
- react-native - 将 React Web View 与响应式网站一起使用是一种好方法吗?
- python - 让子类自动调用超类方法
- postgresql - PostgreSql:如何使用加密列进行查询
- java - Android Recyclerview 的内容 ClickListener 无法正常工作
- java - 使用我自己的 Date 类作为用户输入的日期
- c# - 使用表适配器时未关闭数据库连接
- python - 如果它们在python中列表的固定索引中具有匹配值,则从列表列表中删除列表
- javascript - 如何在 commonJS 默认导出上开玩笑
- c# - 知道 CreateLinkedTokenSource 中哪个 CancellationToken 失败以评估奇怪的 cancelRequested 行为
- java - 我收到一个空指针异常错误,我找不到源