1

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

enter image description here

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:

enter image description here

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

Thank you! :)

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Kresek
  • 55
  • 1
  • 7
  • 1
    take a look here https://www.w3schools.com/js/js_json_html.asp – Yakir Malka May 24 '20 at 10:52
  • Does this answer your question? [For-each over an array in JavaScript](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) – Abu Nooh May 24 '20 at 10:57
  • @yakirMalka It uses POST method and actually I'm not sure how to use it in my case, if my database is in Firebase. Isn't it intended to use with MySQL etc? Sorry for so trivial question, but I'm a total beginner :) – Kresek May 24 '20 at 11:37

1 Answers1

1

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?

blaytenshi
  • 312
  • 3
  • 11
  • Firebase also has a bunch of videos that teach you how best to structure your data here: https://firebase.google.com/docs/firestore/manage-data/structure-data. It is for their other database product called Firestore but the concepts are the same. The API is just a little different. – blaytenshi May 24 '20 at 13:17
  • 1
    Thanks a lot for that huge comment! I need some time to get through it and hyperlinks you've provided, hence probably I will disappear for some time :D I'll let you know once resolve my problem or, what is more likely, I'll encounter any issues :D PS. no, I'm not using any frameworks :) – Kresek May 24 '20 at 18:08
  • 1
    No probs! I suppose if you really want to stick with vanilla javascript, inside the `.forEach(child)` you could call `document.getElementById('elementId').innerHTML = child.val()` but then you run into other complicated problems like needing to know the `elementId` you're going to be setting the innerHTML for... Take a look into a javascript framework if you have time. It's the way modern web is built. My recommendation is Vue because i feel it's more beginner friendly. It'll help you organise your code alot better :) – blaytenshi May 25 '20 at 03:53