如何从Firebase Firestore获取数组并将其输出到HTML表格（提取reserved_items数组中对象的Title元素）

嘿，我一眼就瞅出问题所在啦！你现在的代码直接把整个reserved_items数组塞进HTML里了——浏览器遇到数组对象时，只会调用它默认的toString()方法，所以页面上肯定显示的是[object Object],[object Object]这类奇怪的内容，完全不是你想要的每个Title的效果。

核心问题 #

data.reserved_items是一个包含多个对象的数组，你得遍历这个数组，把每个对象里的Title属性单独提取出来，再转换成用户能看懂的HTML内容。

修改后的代码 #

把你原来生成row的那段代码替换成下面的逻辑就行，我还给你加了空数组的判断，避免显示空白：

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(); 

    // 遍历reserved_items，提取每个Title，用换行分隔展示
    const reservedTitles = data.reserved_items && data.reserved_items.length > 0 
      ? data.reserved_items.map(item => item.Title).join('<br>')
      : 'No reserved items';

    // 如果想用列表展示，就换成下面这行注释里的代码
    // const reservedTitles = data.reserved_items && data.reserved_items.length > 0 
    //   ? `<ul>${data.reserved_items.map(item => `<li>${item.Title}</li>`).join('')}</ul>`
    //   : 'No reserved items';

    let row = `<tr> <td><a onclick="barcode=${data.Barcode}; myFunction(this)">${reservedTitles}</a></td> </tr>`; 
    let table = document.getElementById('myTable') 
    table.innerHTML += row 
    document.getElementById("loader").style.display = "none" 
  }) 
}) 
.catch(err=>{ 
  console.log(`Error: ${err}`); 
});

为什么这么改？ #

• 用map()遍历reserved_items数组，把每个对象的Title属性提取出来，变成一个纯字符串数组
• 用join('<br>')把字符串数组转换成用换行分隔的HTML文本，或者用<ul>/<li>做成列表，更美观
• 加了data.reserved_items && data.reserved_items.length > 0的判断，防止数组为空或者不存在时出现错误

这样修改后，页面上就能正确显示每个reserved item的Title啦！

内容的提问来源于stack exchange，提问作者randomUser786