文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用JSON文件中的ajax请求填充表

问如何使用JSON文件中的ajax请求填充表
EN

Stack Overflow用户
提问于 2018-02-18 12:00:52
回答 1查看 681关注 0票数 2

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

代码语言：javascript
复制
$("#example").DataTable({
ajax: {
            url: 'test.json',    
            dataSrc: 'dataset1'  
        },
        "columns": [
            {
                "data": "name"
            },
            {
                "data": "age"
            },
            {
                "data": "gender"
            }]
});

但是，如何才能获得与下面的数据集相同的结果？

代码语言：javascript
复制
{
  "DataSet2" : {
    "-L5_3n2zzOprYrfRRowd" : {
      "name" : "John",
      "age" : "42",
      "gender" : "M"
    },
    "-L5cf-S1s97ZHdy-0YeN" : {
      "name" : "Mathew",
      "age" : "39",
      "gender" : "M"
    }
  }
}

更新:下面是我正在努力实现的更新。数据与上面的不同，但想法是一样的。下面的内容适用于Json文件，如下所示。

不过，我需要的是处理相同的数据，然后从Firebase。然而，在火基中，每个项目都有一个按压键。

预期的结果如下所示。在这里输入图像描述

HTML:

代码语言：javascript
复制
<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:

代码语言：javascript
复制
    $("#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:

代码语言：javascript
复制
{
"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"
}]

}

javascript
firebase
firebase-realtime-database
datatables
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-18 17:26:52

创建列数组。获取每个对象的子对象并在其上循环使用Object.keys()在键处获取值。最后，将数据推入列数组中。

代码语言：javascript
复制
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

代码语言：javascript
复制
$("#example").DataTable({
ajax: {
        url: 'test.json',    
        dataSrc: data 
      },
      "columns": columns
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48851411

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档