使用HTML和CSS从Firebase格式化数据 [英] Formatting data from Firebase with HTML and CSS

问题描述

这次，我遇到了格式化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)日期时间通常存储在 Epoch Time 中.通常是自1970年1月1日以来的秒数.可以使用各种javascript时间库轻松地将数字转换回文本.一个容易尝试的方法是 Luxon .您可以在此处看到在线时间.

2)其次，只要您调用.push({ myDataObject })函数，RTDB就支持创建唯一的，顺序的，可排序的"push-id".因此，无需将日期和时间存储为对象的键". 此处和此处进行了出色的介绍.如果对您的数据结构有帮助，建议您将数据结构修改为以下内容:

{
  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?

This time I'm facing a problem with formatting data from Firebase. This is how structure in my database looks:

I'm getting it from database using this code:

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)
    });

And on my webpage it looks like:

My question is - how to properly refer to that data to be able to change its appearance using HTML and CSS?

Thank you! :)

解决方案

It looks like you're trying to access the data inside your JSON object being returned to you from your FireBase RealTime database (RTDB). But the way you've structured your data makes it near impossible for your javascript to iterate through it.

Some pointers I can give you regarding your data in the Realtime Database atm:

1) Datetime is typically stored in what's called Epoch Time. Which is typically the number of seconds since Jan 1, 1970. The number can easily be converted back into text using various javascript time libraries. An easy one to try out is Luxon. You can see epoch time with this online convertor here.

2) Secondly, RTDB supports the creation of unique, sequential, sortable "push-id" whenever you call the .push({ myDataObject }) function. So there's no need to store the date and the time as the "keys" to your object. More info about the push-id here and here. It's really interesting stuff!

3) I hate to be writing this suggestion because it seems like taking a step back before you can take steps forward, but I feel like you would benefit alot on looking at some articles on designing databases and how to sensibly structure your data. Firebase also has a great introduction here. If it's any help, for your data structure, I suggest modifying your data structure to something like below:

{
  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,
    }
  }
}

That way, when firebase returns your data, you can iterate through the data much more easily and extract the information you need like:

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());
    })
  });

All the best! BTW are you using any javascript frameworks like React or Vue?

这篇关于使用HTML和CSS从Firebase格式化数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！