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

Posted 2023-03-05

【中文标题】使用 HTML 和 CSS 格式化来自 Firebase 的数据

【英文标题】：Formatting data from Firebase with HTML and CSS

【发布时间】：2020-09-11 01:16:15

【问题描述】：

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

谢谢！ :)

【问题讨论】：

看这里w3schools.com/js/js_json_html.asp

这能回答你的问题吗？ For-each over an array in javascript

@yakirMalka 它使用 POST 方法，如果我的数据库在 Firebase 中，实际上我不确定如何在我的情况下使用它。它不打算与 mysql 等一起使用吗？对不起，这么琐碎的问题，但我是一个完全的初学者:)

【参考方案1】：

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

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

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

2) 其次，RTDB 支持在您调用.push( myDataObject ) 函数时创建唯一的、顺序的、可排序的“push-id”。因此，无需将日期和时间存储为对象的“键”。有关推送 ID here 和 here 的更多信息。真是有趣的东西！

3) 我不想写这个建议，因为在你向前迈进之前似乎要退后一步，但我觉得你会在阅读一些关于设计数据库和如何合理构建数据的文章中受益匪浅. Firebase 也有很好的介绍here。如果对您的数据结构有任何帮助，我建议您将数据结构修改为如下所示：

  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？

【讨论】：

Firebase 还提供了许多视频，可在此处教您如何最好地构建数据：firebase.google.com/docs/firestore/manage-data/structure-data。它适用于他们的另一个名为 Firestore 的数据库产品，但概念是相同的。 API 只是有点不同。

非常感谢您的评论！我需要一些时间来完成它以及您提供的超链接，因此我可能会消失一段时间：D 一旦解决了我的问题，我会通知您，或者更有可能的是，我会遇到任何问题：D PS。不，我没有使用任何框架:)

没有问题！我想如果你真的想坚持使用 vanilla javascript，在 .forEach(child) 内你可以调用 document.getElementById('elementId').innerHTML = child.val() 但你会遇到其他复杂的问题，比如需要知道你将要设置 innerHTML 的 elementId。 .. 如果你有时间，可以看看一个 javascript 框架。这是现代网络的构建方式。我的推荐是 Vue，因为我觉得它对初学者更友好。它会帮助你更好地组织你的代码:)