如何使用来自JSON文件的Ajax请求填充表格
[英]How do I populate a table with an ajax request from a JSON file
问题描述
通过以下代码，我可以使用ajax请求以以下格式填充数据表。
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: 'dataset1'
},
"columns": [
{
"data": "name"
},
{
"data": "age"
},
{
"data": "gender"
}]
});
但是，如何获得与以下数据集相同的结果？
{
"DataSet2" : {
"-L5_3n2zzOprYrfRRowd" : {
"name" : "John",
"age" : "42",
"gender" : "M"
},
"-L5cf-S1s97ZHdy-0YeN" : {
"name" : "Mathew",
"age" : "39",
"gender" : "M"
}
}
}
更新：下面是我要完成的更新。 数据与上述不同，但思路相同。 以下适用于Json文件，如下所示。
但是，我需要使用相同的数据，然后再使用Firebase。 在firebase中，每个项目都有一个按键
预期的结果应如下所示。 在此处输入图片说明
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MK</title>
<!-- DATATABLES -->
<link rel="stylesheet" type="text/css" href="https://www.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<!-- RESPONSIVENESS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<!-- DATETIMEPICKER -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css">
<!-- DATATABLES FREE EDITOR -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css">
<!-- MYCSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type='text' id="dateTime" class="dateTime" placeholder="Date Time" readonly>
<div id='tableContainer'>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th><!-- COLUMN FOR RESPONSIVENESS -->
<th>INBOUND</th>
<th>ORG</th>
<th>STA</th>
<th>ETA</th>
<th>OUTBOUND</th>
<th>DES</th>
<th>STD</th>
<th>ETD</th>
<th>REMARKS</th>
<th>GATE</th>
<th>WHS</th>
<th>TEST</th>
<th>ARR</th>
</tr>
</thead>
</table>
</div>
</body>
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- DATATABLES -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- RESPONSIVENESS -->
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<!-- DATETIMEPICKER -->
<script src="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<!-- DATATABLES FREE EDITOR -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="datatablesAltEditor.js"></script>
<!-- MYJS -->
<script src="libs.js"></script>
JS：
$("#example").DataTable({
select: 'single',
responsive: true,
paging: true,
pageLength: 25,
order: [
[3, 'asc']
],
ajax: {
url: 'dbs.json',
dataSrc: 'dataset1'
},
"columns": [{
"data": null,
defaultContent: '',
className: 'control',
orderable: false
}, // RESPONSIVENESS
{
"data": "inbound"
},
{
"data": "org"
},
{
"data": "sta"
},
{
"data": "eta"
},
{
"data": "outbound"
},
{
"data": "des"
},
{
"data": "std"
},
{
"data": "etd"
},
{
"data": "remarks"
},
{
"data": "gate"
},
{
"data": "whs"
},
{
"data": null,
render: function(data, type, row) {
return data.flight + ' ' + data.org;
}
},
{
data: "arr"
}
]
});
JSON：
{
"dataset1": [{
"inbound": "MK509",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"outbound": "MK509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"arr": "X"
}, {
"inbound": "RT8101",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"outbound": "RT8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"arr": "X"
}],
"dataset2": [{
"flight": "KIKKER1",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"flight": "KE509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"ciss": "X",
"arr": "X"
}, {
"flight": "KIKKER2",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"flight": "QR8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"ciss": "X",
"arr": "X"
}]
}
1 个解决方案
解决方案1
0 已采纳 2018-02-18 17:26:52
创建一个列数组。 获取每个对象的子对象，然后使用Object.keys（）在其上循环以获取key的值。 最后将数据放入列数组
let columns = [];
let data = [];
firebase.db().ref("DataSet2").once("value", function(snap){
snap.forEach(snapshot => {
Object.keys(snapshot.val()).map(k => {
columns.push(Object.assign({}, {"data":k}))
data.push(Object.assign({}, {k:snapshot.val()[k]}))
})
})
})
console.log(columns)
console.log(data)
现在将列和数据分配给DataTable
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: data
},
"columns": columns
});
如何获取要从JSON数据填充的表行？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.