Displaying data of Firebase into simple HTML page - html

Question

I was wondering how I could display multiple rows of data in Firebase onto a blank page/simple website.
I am currently using this to display a simple string:"Testing" through this method:
var bigOne = document.getElementById('bigOne');
var dbRef = firebase.database().ref().child('text');
dbRef.on('value', snap => bigOne.innerText = snap.val());
How it looks in Firebase
How it looks on a blank site
But how can I display multiple lines/rows of data from Firebase onto the blank page?
With multiple lines/rows of data I mean this:
Firebase data
EDIT: This is my current code: Image
However it shows nothing on my HTML page. Do I have to add this line of code back or adjust it? If I add it back it says: [object Object] on the site.
dbRef.on('value', snap => bigOne.innerText = snap.val());

Answer 1

You should listen to a list of items and loop over the items:
First you should adapt your dbRef to
var dbRef = firebase.database().ref('sensor/dht');
then query as follow
var tempo = '';
dbRef.on('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
tempo += 'temp: ' + childSnapshot.val().temp + ' - humidity: ' + childSnapshot.val().humidity + '<br>'; //Just an example of formatting the output
});
bigOne.innerText = tempo;
});
Have a look a the doc at https://firebase.google.com/docs/database/web/lists-of-data#reading_and_writing_lists