javascript - DataTables 和 JSON 对象数组
问题描述
我正在尝试将来自 API 调用的 JSON 响应放入 DataTables 数据表中。我正在努力寻找一种方法让数据进入数据表。
在数据部分(获取数据对象)。我尝试过传递 data.fault_codes 和 data.fault_codes[0]。每次它以未定义或错误的形式返回。
这是我的数据表:
$('#faultCodes').DataTable({
data: data, // Get the data object
columns: [
{ 'data': 'fault_code.code_label' },
{ 'data': 'fault_code.code_description' },
{ 'data': 'fault_code.source_address_label' },
{ 'data': 'fault_code.status' },
{ 'data': 'fault_code.first_observed_at' },
{ 'data': 'fault_code.last_observed_at' },
{ 'data': 'fault_code.type' },
{ 'data': 'fault_code.fmi' },
],
order: [[4, "asc"]]
});
这是 JSON 字符串:
{ "fault_codes": [ { "fault_code": { "id": 173164, "code_label": "SID-85", "code_description": "Engine Oil Burn Valve", "source_address_label": "Engine #1", "status": "open", "first_observed_at": "2017-04-17T07:08:51Z", "last_observed_at": "2017-04-19T23:41:17Z", "type": "intermittent", "fmi": 3, "eld_device": { "id": 4144, "identifier": "99999999", "model": "lbb-1" }, "vehicle": { "id": 4565, "number": "301", "year": "2016", "make": "Demo", "model": "Vehicle", "vin": "WP0AB2966NS458669", "metric_units": false } } }, { "fault_code": { "id": 173165, "code_label": "SPN-6926", "code_description": "SCR System Cleaning Inhibited Due to Low Exhaust Temperature", "source_address_label": "Hitch Control", "status": "open", "first_observed_at": "2017-04-17T07:08:51Z", "last_observed_at": "2017-04-19T23:41:17Z", "type": "constant", "fmi": 3, "eld_device": { "id": 4144, "identifier": "99999999", "model": "lbb-1" }, "vehicle": { "id": 4565, "number": "301", "year": "2016", "make": "Demo", "model": "Vehicle", "vin": "WP0AB2966NS458669", "metric_units": false } } } ], "per_page": 25, "page_no": 1, "total": 2 }
$.ajax({
"url": "/api....,
"type": "GET",
"datatype": 'json',
"success": function (data) {
console.log(data.fault_codes);
$('#faultCodes').DataTable({
data: data.fault_codes, // Get the data object
columns: [
{ 'data': 'fault_code.code_label' },
{ 'data': 'fault_code.code_description' },
{ 'data': 'fault_code.source_address_label' },
{ 'data': 'fault_code.status' },
{ 'data': 'fault_code.first_observed_at' },
{ 'data': 'fault_code.last_observed_at' },
{ 'data': 'fault_code.type' },
{ 'data': 'fault_code.fmi' },
],
order: [[4, "asc"]]
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="faultCodes" class="table table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Code Label</th>
<th>Code Description</th>
<th>Source</th>
<th>Status</th>
<th>First Observed</th>
<th>Last Observed</th>
<th>Type</th>
<th>FMI</th>
</tr>
</thead>
<tbody></tbody>
</table>
解决方案
推荐阅读
- google-apps-script - 有什么办法可以让我向上搜索价值吗?
- javascript - 检查变量是否未定义的更好方法是什么?
- camera - 用户无法上传文件大小超过 4MB 的图像
- json - 反应原生如何迭代json数据并在组件中呈现
- c# - 使用 Linq 而不是嵌套的 foreach 循环来求和值
- javascript - 将联系表 7 值传递给 Wordpress 中的另一个表单
- docker - 如何将内容从一个 pod 推送到另一个 pod?
- python - 乌龟不在坐标时拿起笔
- java - 如何使用 NetBeans 在 java 中处理通过 New JFrame 创建的框架?
- amazon-redshift - Redshift COPY - 获取文件中被拒绝的行