Question

我尝试从Firestore数据库中将数据加载到我的dataTable中，但是它不起作用。还有其他方法可以将数据从Firestore推送到阵列吗？

$(document).ready(function() {
  $('#pageName').html('Dashboard');
  $('#pageName-li').html('Dashboard');

  var dataSet = [];
  x = 1

  let db = firebase.firestore();

  db.collection("warehouses").where("useremail", "==", firebase.auth().currentUser.email).get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
      dataSet[x][1] = doc.data().name;
      dataSet[x][2] = doc.data().useremail;
      dataSet[x][3] = doc.data().address;
      x++
    });
  });

  $('#example').DataTable({
    data: dataSet,
    columns: [
      { title: "Name" },
      { title: "Address" },
      { title: "User email" }
    ]
  });
});

Answer 1

从Firestore异步加载数据。您可以通过一些console.log语句来最好地了解它如何影响您的程序：

console.log("Before running query");
db.collection("warehouses").where("useremail","==",firebase.auth().currentUser.email).get().then(function(querySnapshot) {
   console.log("Got data");
});
console.log("After running query");

运行此代码时，将获得以下输出：

运行查询之前

运行查询后

获得数据

这可能不是您期望输出的顺序。但这完全说明了您的代码为什么不起作用：在您调用$('#example').DataTable( { data: dataSet, ...时，数据尚未加载。

由于数据是从Firebase异步加载的，因此任何需要访问数据的代码都必须在then回调内部，或者从那里调用。

因此，最简单的解决方法是从回调中填充数据表：

db.collection("warehouses").where("useremail","==",firebase.auth().currentUser.email).get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {

            dataSet[x][1] = doc.data().name;
            dataSet[x][2] = doc.data().useremail;
            dataSet[x][3] = doc.data().address;
            x++
    });
    $('#example').DataTable( {
                    data: dataSet,
                    columns: [
                            { title: "Name" },
                            { title: "Address" },
                            { title: "User email" }
                    ]
            });
});

Answer 2

谢谢弗兰克这是工作代码。（没有按钮就无法使用，因此我添加了一个）

<button type="button"  id="warehousesGetDataBTN">Get Warehouses</button>
<table id="example" class="display" width="100%"></table>

<script>

function getDatainTable() {

    let db = firebase.firestore();
    var dataSet = new Array();
    var i=1;

   db.collection("warehouses").where("useremail","==",firebase.auth().currentUser.email).get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {

                    dataSet.push([doc.data().name, doc.data().useremail]);
                    i=i+1;

});


    $('#example').DataTable( {
            data: dataSet,
            columns: [
                    { title: "Name" },
                    { title: "Email" }
            ]
    } );
    });
}

$(document).ready(function(){

    $( '#warehousesGetDataBTN' ).click(function(){getDatainTable()});

});
</script>

将Firestore数据添加到DataTable

2 个答案: