如何将 Firestore 文档中的所有数据显示到 html 表中答案

【问题标题】：How can I display all data from Firestore documents into an html table如何将 Firestore 文档中的所有数据显示到 html 表中
【发布时间】：2020-12-27 23:46:29
【问题描述】：

我正在设计一个网页，它将从我的 firestore 集合中获取数据并显示每个文档及其对应的字段。代码如下：

<table class="table is-striped is-narrow is-hoverable is-fullwidth">
        <thead>
        <tr>
            <th>Title</th>
            <th>Author</th>
            <th>AR Level</th>
        </tr>
        </thead>
        <tbody id="myTable">
        </tbody>
    </table>

这里是 JS：

db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(
    function(querySnapshot){
        querySnapshot.forEach(function(doc){
            dataObj = doc.data()
            console.log(dataObj)
            buildTable(dataObj)
            function buildTable(data){
                var table = document.getElementById('myTable')
        
                for (var i = 0; i < data.length; i++){
                    var row = `<tr>
                                    <td>${data[i].Title}</td>
                                    <td>${data[i].Author}</td>
                                    <td>${data[i].Points}</td>
                              </tr>`
                    table.innerHTML += row
                }
            }
        })
    }
)

【问题讨论】：

您遇到错误了吗？如果有，是什么？
您好，数据未显示。没有错误信息。后来我意识到数据不是我订购的。所以这就是我来stackoverflow的原因

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

我不明白您为什么在函数中使用 for 循环。除非一个“书”文档是一组项目，每个项目都具有标题/作者/点数字段。

您基本上是在循环遍历数据对象，就好像它是一个数组一样。很有可能不是。

如果我是对的，并且一个“书”文档是包含这三个字段的对象/地图，那么您的代码应该是这样的：

db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(querySnapshot=>{
        querySnapshot.forEach(doc=>{
            let data = doc.data();
            let row  = `<tr>
                            <td>${data.Title}</td>
                            <td>${data.Author}</td>
                            <td>${data.Points}</td>
                      </tr>`;
            let table = document.getElementById('myTable')
            table.innerHTML += row
        })
    })
    .catch(err=>{
        console.log(`Error: ${err}`)
    });

【讨论】：