Добавить данные Firestore в DataTable

Question

Я пытаюсь загрузить данные в таблицу 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

Спасибо, Фрэнк. Вот рабочий код.(это не работает без кнопки, поэтому я добавил один)

<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>

Answer 2

Данные загружаются из 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" }
                    ]
            });
});