使用 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 更改其外观？

谢谢： ：）

Answer 1

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

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

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

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