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

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

上图是阵列的结构。有一个名为reserved items的数组，其中包含对象。我想输出这个数组中的所有对象，特别是“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}`)
        });

let查询；
if（lastReservedBook！=null）{
query=db.collection（“users”）.where（“uid”，“==”，uid）.startAfter（lastReservedBook）
}否则{
query=db.collection（“users”）。其中（“uid”，“uid=”，uid）；
}
query.limit（100）.get（）.then（querySnapshot=>{
lastReservedBook=querySnapshot.docs[querySnapshot.docs.length-1]；
querySnapshot.forEach（doc=>{
console.log（doc.data（））
设data=doc.data（）；
让行=`
试试这个：

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

试试这个：

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

我认为你把文件和字段弄混了

假设用户ID（即
uid
）是唯一的，则对
db.collection（“用户”）的查询将只返回一个文档

然后，在这个独特的文档中，您有一个名为
reserved_items
的字段，该字段的类型为。更准确地说，它是一个对象数组。因此您需要在数组元素上循环，而不是在数组元素上循环

因此，以下几点应该可以做到：

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

let query=db.collection（'users'）。其中（'uid'，'='，uid）；
查询
.get（）
.然后（（querySnapshot）=>{
const queryDocumentSnapshot=querySnapshot.docs[0]；//querySnapshot中只有一个文档！！
const reservedItemArray=queryDocumentSnapshot.data（）
.保留项目；
ReservedItemArray.forEach（（对象，索引）=>{
let row=`${obj.Title}`；
table.innerHTML+=行；
});
// ...
})
.catch（（错误）=>{
log（`Error:${err}`）；
});

我还不是100%清楚：


您希望为链接文本显示什么…我已将
标题
与
对象标题
一起使用，但您可以进行调整
您想对
myFunction（this）
执行什么操作。您可能应该使用
索引，例如像
myFunction（index）
，它指示元素在数组中的位置

为什么限制为100。如果您只想在表中显示100行，则由您调整上述代码。但是，如果您需要限制要显示的元素数量，则此限制应适用于数组的元素，而不是查询
我想你把文档和字段弄混了

假设用户ID（即
uid
）是唯一的，则对
db.collection（“用户”）的查询将只返回一个文档

然后，在这个独特的文档中，您有一个名为
reserved_items
的字段，该字段的类型为。更准确地说，它是一个对象数组。因此您需要在数组元素上循环，而不是在数组元素上循环

因此，以下几点应该可以做到：

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

let query=db.collection（'users'）。其中（'uid'，'='，uid）；
查询
.get（）
.然后（（querySnapshot）=>{
const queryDocumentSnapshot=querySnapshot.docs[0]；//querySnapshot中只有一个文档！！
const reservedItemArray=queryDocumentSnapshot.data（）
.保留项目；
ReservedItemArray.forEach（（对象，索引）=>{
let row=`${obj.Title}`；
table.innerHTML+=行；
});
// ...
})
.catch（（错误）=>{
log（`Error:${err}`）；
});

我还不是100%清楚：


您希望为链接文本显示什么…我已将
标题
与
对象标题
一起使用，但您可以进行调整
您想对
myFunction（this）
执行什么操作。您可能应该使用
索引，例如像
myFunction（index）
，它指示元素在数组中的位置

为什么限制为100。如果您只想在表中显示100行，则由您调整上述代码。但是，如果您需要限制要显示的元素数量，则此限制应适用于数组的元素，而不是查询
JSON.parse（JSON.stringify（doc.data（）），如果问题是您没有看到对象中的数据（您可能需要一个循环），那么这应该可以工作。
JSON.parse（JSON.stringify（doc.data（）），如果问题是您没有看到对象中的数据（您可能需要一个循环），那么这应该可以工作
您好，谢谢您的回答。如何使此解决方案适用于多个文档？querySnapshot.docs[querySnapshot.docs.length]；您应该在querySnapshot上循环，请参见您好，谢谢您的回答。如何使此解决方案适用于多个文档？querySnapshot.docs[querySnapshot.docs.length]；您应该在QuerySnapshot上循环，请参见