如何使用来自JSON文件的ajax请求填充表 [英] How do I populate a table with an ajax request from a JSON file

查看：81
本文介绍了如何使用来自JSON文件的ajax请求填充表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用以下代码，我可以使用ajax请求以下面的格式填充数据表。

With the following code I am able to populate a datatable table in below format using ajax request.

$("#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"
    }
  }
}

更新：
低于我想要完成的更新。
数据与上述不同，但想法是一样的。
以下适用于Json文件，如下所示。

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.

然而，我需要使用相同的数据，然后使用Firebase。
在firebase中，每个项目都有一个按键

What I need however is to work with the same data but then from Firebase. In firebase however each item has a push-key

所需的结果应如下所示。
在此输入图片说明

The desired outcome should be like below. enter image description here

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

}

推荐答案

创建一个列数组。获取每个对象的子节点并使用Object.keys（）在其上循环以获取键值。最后将数据推入列数组

Create an array of columns. Get the child for each object and Loop over it using Object.keys() to get value at 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)

现在将列和数据分配给DataTable

Now assign the columns and data to DataTable

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

这篇关于如何使用来自JSON文件的ajax请求填充表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆