个人中心
gpt4 book ai didi

javascript - 如何获取填充有来自 firebase 的数据的表

转载 作者：行者123 更新时间：2023-12-03 02:24:55 29 4
gpt4 key购买 nike

下面的代码使我能够使用 JSON 文件中的数据填充数据表。不过，我现在正在尝试获取从 google firebase 数据库中的数据填充的数据。在 Google Firebase 数据库中推送新数据需要使用 Push.key，因此由于我缺乏 Firebase 经验，因此很难将数据填充到表中。

结果应如下:

enter image description here

以下代码从 Firebase 数据创建 object.arrays。1 为列1 数据

var columns = [];
var data = [];
firebase.database().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)

我希望以下内容能够填充表格，但事实并非如此(什么也没有发生。

有什么想法可以实现这一点吗？

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

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

firebase中的数据如下: enter image description here

列和数据数组的结果如下:

列 enter image description here

数据 enter image description here

最佳答案

使用data选项指定您的数据是 JavaScript 数组。

例如:

$("#example").DataTable({
   "data": data,
   "columns": columns
});

至于检索数据，您需要执行以下操作:

var columns = [];
var data = [];

firebase.database().ref("DataSet2").once("value", function(snap){
    snap.forEach(snapshot => {
        var rcd = [];
        Object.keys(snapshot.val()).map(k => {
              columns.push(Object.assign({}, {"data":k}));
              rcd.push(Object.assign({}, {k:snapshot.val()[k]}));
        })
        data.push(rcd);
    });
});

关于javascript - 如何获取填充有来自 firebase 的数据的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48987309/

29 4 0
文章推荐： javascript - 在 Fabric js 中添加和删除自定义属性
文章推荐： R Cairo pdf 字体在 Adob​​e Illustrator 中无法读取
文章推荐： blackberry - 黑莓中的目录/文件夹监听器
文章推荐： javascript - promise 链和所有
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com