如何解决使用firestore集合使用javascript函数创建Html表
我正在为我的 firebase 构建一个基本的 html 管理面板。我创建了一个 javascript 函数来从 firestore 获取值并设置在 html 表中。如果我的所有值都在同一个集合中,那么我可以获取这些值并将其成功放入 html 表中。但是如果我必须同时使用两个集合,那么我就会遇到问题。为了提供更多详细信息,我正在从 firestore 获取我的 NonAttendance 值,并且我想在 html 表中显示学生姓名和姓氏。我的 nonAttendance 集合在 STUDENTS 数组中只有 user id,我想使用此 id 从 Users 表中获取学生信息>.我想我遇到了问题,是关于 promise 当我使用 async 函数或 .then() 时,表什么都不显示,当我不使用时'不要在表中使用任何承诺和文本而不是 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")
})
}
This is the google chrome console screenshots
如您在图片中看到的,在右侧,我成功地从 firestore 获得了所有价值,但我无法将其放入左侧的表中。
My NonAttendance Collection in Firestore screenshots 这是我的 Firestore 的 NonAttendance 集合示例。
解决方法
问题在于 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");
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。