如何在 HTML 中显示快照数据？

Question

我正在尝试将数据库中的快照数据显示到 html 页面，但它似乎显示的是“[object Object]”而不是 gmail。 我是编码新手，所以请耐心等待。 这是代码：

firebase.database().ref('gmails/').get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
    var content = '';
 // give each message a unique ID
         content += "<li>";
            content +=  snapshot.val();
         content += "</li>";
 
         document.getElementById("gmails").innerHTML += content;
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});

HTML：

<ul id="gmails">
    
</ul>

在此处输入图像描述

在图像中，您可以看到 object 而不是值

Answer 1

听起来您有一个 javascript Object ，其中包含要在页面上呈现为文本的数据。 当您看到[object Object]时，这表明您正在尝试将某些内容呈现为您的代码不知道如何转换为文本的文本，在本例中是您的snapshot object。

您可以尝试一些简单的事情/可以自己回答的问题：

• 您的snapshot object 的“形状”是什么？ 你知道它包含的变量的名称吗？ 它们应该是字符串吗？ 它是否包装了某种 HTML？ 如果是这样，您可能希望渲染 object 中的特定字符串或其中包含的一个大字符串。 如果它是 HTML 我相信你可以按照你现在的方式插入它。

如果您不知道snapshot内容的结构，有一些简单的方法可以弄清楚：

• 如果您知道如何使用 Chrome 调试器（开发工具的“源”选项卡，ctrl-P 或 command-P 搜索您的相关文件，然后单击行号添加断点），请在console.log(snapshot.val());上放置断点console.log(snapshot.val()); 并检查snapshot的值。 您可以 hover 在其上单击并单击其子对象，并确定它们的名称和结构以访问和查找要显示的字符串

• 如果您想要一个没有工具的简单解决方案，您可以更改console.log(snapshot.val()); ...到： console.log(JSON.stringify(snapshot)); ...并查看您的数据如何构建为 JSON。 这只会将整个 object 放到您的控制台中，我假设它只是按原样显示`[object Object]。

一旦你弄清楚了，你应该能够访问包含你试图呈现的文本的snapshot的正确子级。