使用 Firestore 集合创建带有 javascript 函数的 Html 表

Question

我正在为我的 firebase 构建一个基本的 html 管理面板。我创建了一个 javascript 函数来从 firestore 获取值并在 html 表中进行设置。如果我的所有值都在同一个集合中，那么我可以获取这些值并将其成功放入 html 表中。但是如果我必须同时使用两个集合，那么我就有问题了。为了提供更多详细信息，我正在从 firestore 获取我的 NonAttendance 值，并且我想在 html 表中显示学生姓名和姓氏。我的 nonAttendance 集合在 STUDENTS 数组中只有 user id，我想使用此 id 从 Users 表中获取学生信息>。我想我遇到了问题，这是关于 promise 当我使用 async 函数或 .then() 时，表格什么也不显示t 在 table 中使用任何 promise 和 text 内容而不是 firestore 值，然后 Table 会显示它们。我的javascript函数是：

function GetClassNonAttendaceInfoDetail(NonAttendaceInfoID){

//console.log("CLASs===>",NonAttendaceInfoID);
const REF_DATABASE = db.collection("NonAttendance").doc(NonAttendaceInfoID);
REF_DATABASE.get().then((doc) => {

    var showClassNonAttendanceInfo = document.getElementById('showClassNonAttendanceInfo');
    var showClassNonAttendanceInfoDetail = document.getElementById('showClassNonAttendanceInfoDetail');

    showClassNonAttendanceInfo.hidden = true;
    showClassNonAttendanceInfoDetail.style.visibility = 'visible';

    var students = doc.data().STUDENTS;
    //console.log(students);

    var html = '<table class="data-table table nowrap"><thead><tr>';
    html +=
        '                        <th>CLASS</th>\n' +
        '                        <th>STUDENT NO</th>\n' +
        '                        <th>NAME_SURNAME</th>\n' ;
    html += '</tr></thead><tbody>';


    students.forEach(async index => {
        const REF = await db.collection("Users").doc(index).get();
        //console.log(REF.data().NAME);
             
        html += '<tr>';

        html += '<td>' + REF.data().CLASS + '</td>';
        html += '<td>' + REF.data().STUDENT_NO + '</td>';
        html += '<td>' + REF.data().NAME +' '+ REF.data().NAME+ '</td>';

        html += '</tr>';   
        console.log(REF.data());
    
    })
    html += '</tbody></table>';
    showClassNonAttendanceInfoDetail.insertAdjacentHTML("beforeend", html);

}).catch(()=>{
    console.log("Hata")
})
}

This is the google chrome console screenshots

正如你在图片中看到的，在右侧我成功地从 firestore 获得了我的所有价值，但我不能把它放在左侧的表中。

My NonAttendance Collection in Firestore screenshots 这是我的 Firestore 的 NonAttendance 集合示例。

Answer 1

问题是forEach 不支持async。为了解决您的问题，您应该将索引存储到一个数组中并使用for 循环遍历它们，因为它们支持async。您的代码如下所示：

function GetClassNonAttendaceInfoDetail(NonAttendaceInfoID) {
  //console.log("CLASs===>",NonAttendaceInfoID);
  const REF_DATABASE = db.collection("NonAttendance").doc(NonAttendaceInfoID);
  REF_DATABASE.get()
    .then((doc) => {
      var showClassNonAttendanceInfo = document.getElementById(
        "showClassNonAttendanceInfo"
      );
      var showClassNonAttendanceInfoDetail = document.getElementById(
        "showClassNonAttendanceInfoDetail"
      );

      showClassNonAttendanceInfo.hidden = true;
      showClassNonAttendanceInfoDetail.style.visibility = "visible";

      var students = doc.data().STUDENTS;
      //console.log(students);

      var html = '<table class="data-table table nowrap"><thead><tr>';
      html +=
        "                        <th>CLASS</th>\n" +
        "                        <th>STUDENT NO</th>\n" +
        "                        <th>NAME_SURNAME</th>\n";
      html += "</tr></thead><tbody>";

      var indexes = [];

      students.forEach((i) => {
        indexes.push(i);
      });

      for (let i = 0; i < indexes.length; i++) {
        const index = indexes[i];

        const REF = await db.collection("Users").doc(index).get();
        //console.log(REF.data().NAME);

        html += "<tr>";

        html += "<td>" + REF.data().CLASS + "</td>";
        html += "<td>" + REF.data().STUDENT_NO + "</td>";
        html += "<td>" + REF.data().NAME + " " + REF.data().NAME + "</td>";

        html += "</tr>";
        console.log(REF.data());
      }

      html += "</tbody></table>";
      showClassNonAttendanceInfoDetail.insertAdjacentHTML("beforeend", html);
    })
    .catch(() => {
      console.log("Hata");
    });
}