Firebase and JavaScript: Update fetched data on website from real time database without reloading website [closed]

I want to deploy a website to Firebase. The website has to fetch data from the firebase database. If the values from the database has been updated I want that the fetched data on the website will be automatically updated without reloading the page.

Have you an idea, how to updata data on the firebase website automatically in the background? If you have any suggestions, please let me know.

Answer

The question is kinda vague, but you’ll make a call to the database and listen for changes to the data in firebase. The below method will re-run if the data changes.

//Get a database reference    
var exampleRef = firebase.database().ref().child("the_data_to_listen_to");

//.on() will call the data from the database and will listen for changes.
exampleRef.on("value", function(snapshot){
    //Update the data in the UI here.
    document.getElementById("my_div").innerText = snapshot.val();
});

Now each time the data changes in the database, it will update the UI by getting the div with the id “my_div” and inserting the value of the snapshot from the database. You can create more complex results, build tables, update graphs etc but the principle is the same.