无法列出html页面上的所有文档。它仅显示第一个文档。如何列出符合条件的所有文档。任何帮助将不胜感激。
我正在通过以下方式获取我的Firestore文档
this.afs.collection('stories', ref => ref.where('userid', '==', this.userId))
.get().toPromise()
.then(snapshot => {
snapshot.forEach(doc => {
var sTname = doc.data().storyteller;
var sTitle = doc.data().storytitle;
var readyFile = doc.data().readyfilepath;
var rawFile = doc.data().rawfilepath;
document.getElementById("stname").innerHTML = sTname;
document.getElementById("stitle").innerHTML = sTitle;
document.getElementById("readyfile").innerHTML = readyFile;
document.getElementById("rawfile").innerHTML = rawFile;
});
})
.catch(error => {
console.log("Error getting stories: ", error);
});
}
,现在我想在我正在使用的html页面上显示所有文档
<div class="container">
<h2>My Stories</h2>
<table class="table table-striped">
<thread>
<tr>
<th>Story Teller Name</th>
<th>Story Title</th>
<th>Ready File</th>
<th>Raw File </th>
</tr>
</thread>
<tbody>
<tr id="tr">
<td id="stname"></td>
<td id="stitle"></td>
<td id="readyfile"></td>
<td id="rawfile"></td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
问题是您正在HTML中创建一行,并且正在从脚本中设置列值。这将导致仅显示最后一行。
相反,您应该根据脚本动态创建行。对于每个文档,都有一个新行。有两种选择:
insertRow()
获取表对象后,使用insertCell()
和document.getElementById('tableId')
方法innerHTML
中的tbody
createElement()
,createTextNode()
创建行,列,文本值,然后使用appendChild()
在适当的位置附加元素。这是上面提到的方法1的运行示例。您也可以尝试其他方式。在示例中,数据被硬编码在数组中。
function populateDataMethod1() {
var data = [{ "storyteller": "M1:Name 1", "storytitle": "M1:Title 1", "readyFile": "M1:File 1", "rawfile": "M1:File A" },
{ "storyteller": "M1:Name 2", "storytitle": "M1:Title 2", "readyFile": "M1:File 2", "rawfile": "M1:File B" },
{ "storyteller": "M1:Name 3", "storytitle": "M1:Title 3", "readyFile": "M1:File 3", "rawfile": "M1:File C" }]
var table = document.getElementById("data");
data.forEach(doc => {
var row = table.insertRow();
row.insertCell().innerHTML = doc.storyteller;
row.insertCell().innerHTML = doc.storytitle;
row.insertCell().innerHTML = doc.readyFile;
row.insertCell().innerHTML = doc.rawfile;
});
}
function populateDataMethod2() {
var data = [{ "storyteller": "M2:Name 1", "storytitle": "M2:Title 1", "readyFile": "M2:File 1", "rawfile": "M2:File A" },
{ "storyteller": "M2:Name 2", "storytitle": "M2:Title 2", "readyFile": "M2:File 2", "rawfile": "M2:File B" },
{ "storyteller": "M2:Name 3", "storytitle": "M2:Title 3", "readyFile": "M2:File 3", "rawfile": "M2:File C" }]
var table = document.getElementById("data-table");
var dataHtml = "";
data.forEach(doc => {
dataHtml += "<tr><td>" + doc.storyteller + "</td><td>" + doc.storytitle + "</td><td>" +
doc.readyFile + "</td><td>" + doc.rawfile + "</td></tr>";
});
document.getElementById("data").innerHTML = dataHtml;
}
function populateDataMethod3() {
var data = [{ "storyteller": "M3:Name 1", "storytitle": "M3:Title 1", "readyFile": "M3:File 1", "rawfile": "M3:File A" },
{ "storyteller": "M3:Name 2", "storytitle": "M3:Title 2", "readyFile": "M3:File 2", "rawfile": "M3:File B" },
{ "storyteller": "M3:Name 3", "storytitle": "M3:Title 3", "readyFile": "M3:File 3", "rawfile": "M3:File C" }]
var table = document.getElementById("data-table");
data.forEach(doc => {
var row = document.createElement("tr");
var column1 = document.createElement("td");
var column2 = document.createElement("td");
var column3 = document.createElement("td");
var column4 = document.createElement("td");
column1.appendChild(document.createTextNode(doc.storyteller));
column2.appendChild(document.createTextNode(doc.storytitle));
column3.appendChild(document.createTextNode(doc.readyFile));
column4.appendChild(document.createTextNode(doc.rawfile));
row.appendChild(column1);
row.appendChild(column2);
row.appendChild(column3);
row.appendChild(column4);
document.getElementById("data").appendChild(row);
});
}
<input type="button" value="Populate in Method 1" onclick="populateDataMethod1()" />
<input type="button" value="Populate in Method 2" onclick="populateDataMethod2()" />
<input type="button" value="Populate in Method 3" onclick="populateDataMethod3()" />
<table class="table table-striped" id="data-table">
<thread>
<tr>
<th>Story Teller Name</th>
<th>Story Title</th>
<th>Ready File</th>
<th>Raw File </th>
</tr>
</thread>
<tbody id="data">
</tbody>
</table>