如何使用来自JSON文件的Ajax请求填充表格

Question

With the following code I am able to populate a datatable table in below format using ajax request. 通过以下代码，我可以使用ajax请求以以下格式填充数据表。

$("#example").DataTable({
ajax: {
            url: 'test.json',    
            dataSrc: 'dataset1'  
        },
        "columns": [
            {
                "data": "name"
            },
            {
                "data": "age"
            },
            {
                "data": "gender"
            }]
});

However how could I get the same result with a dataset as the one below? 但是，如何获得与以下数据集相同的结果？

{
  "DataSet2" : {
    "-L5_3n2zzOprYrfRRowd" : {
      "name" : "John",
      "age" : "42",
      "gender" : "M"
    },
    "-L5cf-S1s97ZHdy-0YeN" : {
      "name" : "Mathew",
      "age" : "39",
      "gender" : "M"
    }
  }
}

UPDATE: Below an update of what I am trying to get accomplished. 更新：下面是我要完成的更新。 The data is different from the above but the idea is the same. 数据与上述不同，但思路相同。 The below works for with a Json file as the shown below. 以下适用于Json文件，如下所示。

What I need however is to work with the same data but then from Firebase. 但是，我需要使用相同的数据，然后再使用Firebase。 In firebase however each item has a push-key 在firebase中，每个项目都有一个按键

The desired outcome should be like below. 预期的结果应如下所示。 enter image description here 在此处输入图片说明

HTML: 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: 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: 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"
}]

} }

Answer 1

Create an array of columns. 创建一个列数组。 Get the child for each object and Loop over it using Object.keys() to get value at key. 获取每个对象的子对象，然后使用Object.keys（）在其上循环以获取key的值。 Finally push the data into columns array 最后将数据放入列数组

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)

Now assign the columns and data to DataTable 现在将列和数据分配给DataTable

$("#example").DataTable({
ajax: {
        url: 'test.json',    
        dataSrc: data 
      },
      "columns": columns
});

如何使用来自JSON文件的Ajax请求填充表格

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-18 17:26:52

如何使用来自JSON文件的Ajax请求填充表格

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-18 17:26:52

解决方案1
0 已采纳 2018-02-18 17:26:52