Javascript 使用HTML和CSS格式化Firebase中的数据

这一次，我在格式化Firebase中的数据时遇到了一个问题。以下是我的数据库结构的外观：

我使用以下代码从数据库中获取：

const preObject = document.getElementById('object')
var parametryObject = firebase.database()
    .ref('Parametry_powietrza')
    .limitToLast(1)
    .once('value').then(function(snapshot) {
        var listaParametrow = snapshot.val();
        console.log(listaParametrow);
        preObject.innerText = JSON.stringify(snapshot.val(), null, 3)
    });

在我的网页上，它看起来像：

我的问题是-如何正确引用该数据，以便能够使用HTML和CSS更改其外观

---

谢谢！：）

看起来您正试图访问从FireBase实时数据库（RTDB）返回给您的JSON对象中的数据。但是，您构建数据的方式使得javascript几乎不可能对其进行迭代

关于实时数据库atm中的数据，我可以给您一些建议：

1） Datetime通常存储在所谓的。这通常是自1970年1月1日以来的秒数。使用各种javascript时间库可以轻松地将数字转换回文本。一个容易尝试的方法是。您可以使用此在线转换器查看大纪元时间

2） 其次，无论何时调用

.push（{myDataObject}）

函数，RTDB都支持创建唯一、连续、可排序的“push id”。因此，不需要将日期和时间存储为对象的“键”。有关推送id和的更多信息。这真是有趣的东西

3） 我不喜欢写这个建议，因为它看起来像是在你向前迈出一步之前后退了一步，但我觉得如果你看一些关于设计数据库和如何合理地构建数据的文章，你会受益匪浅。Firebase也有一个很好的介绍。如果对您的数据结构有帮助，我建议将您的数据结构修改为以下内容：

{
  Parametry_powietrza: {
    [firebase_push_id]: {
      timestamp: 726354821,
      Cisnienie: 1007.78,
      Temperatura: 19.23,
      Wilgotnosc: 52.00,
    },
    [firebase_push_id]: {
      timestamp: 726354821,
      Cisnienie: 1007.78,
      Temperatura: 19.23,
      Wilgotnosc: 52.00,
    }
  }
}

这样，当firebase返回数据时，您可以更轻松地遍历数据并提取所需信息，如：

database
  .ref('Parametry_powietrza')
  .limitToLast(10)
  .once('value', snapshot => {
    snapshot.forEach(child => {
      // do what you need to do with the data
      console.log("firebase push id", child.key);
      console.log("data", child.val());
    })
  });

---

祝你一切顺利！顺便说一句，您是否使用了React或Vue等javascript框架？

看看这里，这是否回答了您的问题@yakirMalka它使用POST方法，实际上，如果我的数据库在Firebase中，我不确定如何在我的案例中使用它。它不打算与MySQL等一起使用吗？很抱歉问这么简单的问题，但我是一个完全的初学者：）Firebase还有一系列视频，教你如何在这里最好地构建数据：。这是为他们的另一个名为Firestore的数据库产品设计的，但概念是相同的。API只是有点不同。非常感谢你的评论！我需要一些时间来完成它和您提供的超链接，因此我可能会消失一段时间：D我会让您知道一旦解决了我的问题，或者，更可能的是，我会遇到任何问题：D PS。不，我没有使用任何框架：）没有问题！我想如果你真的想坚持使用香草javascript，在

.forEach（child）

中，你可以调用

document.getElementById（'elementId'）。innerHTML=child.val（）

，但是你会遇到其他复杂的问题，比如需要知道

elementId

你将要为。。。如果您有时间，请查看javascript框架。这就是现代网络的构建方式。我推荐Vue，因为我觉得它更适合初学者。它将帮助您更好地组织代码：）