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

Question

我正在为我的firebase构建一个基本的html管理面板。我创建了一个javascript函数来从firestore中获取值，并将其设置在html表中。如果我的所有值都在同一个集合中，那么我可以成功地获得这些值并将其放入html表中。但若我必须同时使用两个集合，那个么我就有问题了。为了提供更多详细信息，我正在从firestore获取我的NonAttendance值，我想在html表中显示学生的姓名。我的nonAttendance集合在STUDENTS数组中只有user-id，我希望使用此id从Users表中获取学生信息。我想我遇到了问题，这是关于promise当我使用async函数或.then((时，表什么都不显示，当我不使用任何promise并在表中用文本代替firestore值时，表会显示它们。我的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")
})
}

这是谷歌chrome控制台屏幕截图

正如你在照片中看到的，在右边，我成功地从消防商店获得了我的全部价值，但我不能把它放在左边的桌子上。

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");
});
}