javascript - 使用 HTML 和 CSS 格式化来自 Firebase 的数据

Question

这次我遇到了从 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 更改其外观？

谢谢！:)

标签： javascripthtmlcssjsonfirebase-realtime-database

Answer 1

看起来您正在尝试访问从 FireBase 实时数据库 (RTDB) 返回给您的 JSON 对象中的数据。但是您构建数据的方式使您的 javascript 几乎不可能遍历它。

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

1) Datetime 通常存储在所谓的Epoch Time中。这通常是自 1970 年 1 月 1 日以来的秒数。使用各种 javascript 时间库可以轻松地将数字转换回文本。一个简单的尝试是Luxon。您可以在此处使用此在线转换器查看纪元时间。

.push({ myDataObject })2) 其次，RTDB 支持在调用函数时创建唯一的、顺序的、可排序的“push-id” 。因此，无需将日期和时间存储为对象的“键”。有关 push-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());
    })
  });

一切顺利！顺便说一句，您是否使用任何 JavaScript 框架，例如 React 或 Vue？