如何从 Firebase Firestore 检索数组并将其输出到 HTML table

Question

我有一个包含多个 objects 的数组。我想将 objects 输出到 HTML 页面

上图是数组的结构。有一个名为保留项的数组，其中包含 objects。我想输出此数组中的所有 objects，特别是“Title”元素。这是我尝试使用的代码

let query;
    if (lastReservedBook != null) {
        query = db.collection("users").where("uid", "==", uid).startAfter(lastReservedBook)
    } else {
        query = db.collection("users").where("uid", "==", uid);
    }
    
    query.limit(100).get().then(querySnapshot=>{
    
        lastReservedBook = querySnapshot.docs[querySnapshot.docs.length - 1];
    
            querySnapshot.forEach(doc=>{
            console.log(doc.data())
            let data = doc.data();
            let row  = `<tr>
                                    <td><a onclick="barcode=${data.Barcode}; myFunction(this)">${data.reserved_items}</a></td>
                                    
                            </tr>`;
            let table = document.getElementById('myTable')
            table.innerHTML += row
            document.getElementById("loader").style.display = "none"
            })
        })
        .catch(err=>{
            console.log(`Error: ${err}`)
        });

这是输出（我不想要）：

Answer 1

试试这个：

console.log(JSON.stringfy(doc.data()));

Answer 2

我认为您混淆了文档和字段。

假设用户 ID（即 uid）是唯一的，对 db.collection("users").where("uid", "==", uid) 的查询将 return 只有一个文档 。

然后，在这个独特的文档中，您有一个名为 reserved_items 的字段，其类型为 Array. More precisely it is an Array of Objects. So you need to loop over the Array elements, not on the QuerySnapshot。

所以下面应该可以解决问题：

  let query = db.collection('users').where('uid', '==', uid);

  query
    .get()
    .then((querySnapshot) => {
      const queryDocumentSnapshot = querySnapshot.docs[0]; //There is only one doc in the QuerySnapshot!!

      const reservedItemsArray = queryDocumentSnapshot.data()
        .reserved_items;

      reservedItemsArray.forEach((obj, index) => {
        let row = `<tr><td><a onclick="barcode=${obj.Barcode}; myFunction(index)">${obj.Title}</a></td></tr>`;
        table.innerHTML += row;
      });

      // ...
    })
    .catch((err) => {
      console.log(`Error: ${err}`);
    });

我不是 100% 清楚：

您想为 link 文本显示什么...我已经将 Title 与 obj.Title 一起使用，但您可以调整。
您想用 myFunction(this) 做什么。您可能应该使用 index，例如比如myFunction(index)，表示元素在Array中的位置。
为什么限制为100。如果您只想在table中显示100行，则由您调整上面的代码。但同样，如果您需要限制要显示的元素数量，此限制应适用于 Array 的元素，而不适用于查询。

Answer 3

JSON.parse(JSON.stringify(doc.data()) ，如果问题是您没有看到对象中的数据（您可能需要一个循环），这将起作用

如何从 Firebase Firestore 检索数组并将其输出到 HTML table

How to retrieve an array from Firebase Firestore and output it onto an HTML table

html

javascript

cloud

firebase

google-cloud-firestore