CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
Waqas Umer
Waqas Umer

Reputation: 99

I want to get data from Firebase realtime database and wants to display in my HTML page

I want to get data from the Firebase real-time database and display it on my HTML page. I get all the data perfectly in the console, but I can't see it on my HTML page. I have also used for loop but it doesn't show data.

Here is my complete code: https://jsfiddle.net/waqasumer/z7wt6d0e/1/

    var main = document.getElementById("main-section");

function saveData() {
    var todoItem = document.getElementById("todo-item");

    if (todoItem.value === "") {
        alert("Please enter task");
    } else {
        var key = firebase.database().ref('tasks').push().key;
        var tasks = {
            todoItem: todoItem.value,
            key: key
        }
        firebase.database().ref('tasks/' + key).set(tasks);

        document.getElementById("todo-item").value = "";
    }

}

function getData() {
    firebase.database().ref('tasks').on('child_added', function(data) {
        console.log(data.val());

        for (var i = 0; i < data.length; i++) {
            main.innerHTML = document.write(data + "<br />");
        }
    })
}

getData();

Upvotes: 0

Views: 384

Answers (1)

BEAGLE
BEAGLE

Reputation: 343

Change your JS code to following and it will work.

 function getData() {
              firebase.database().ref('tasks').on('child_added', function(data) {
                  console.log(JSON.stringify(data.val())); //To view the data in console
                  main.innerHTML += data.val().todoItem + "<br />"; //To append data into the div 
              })
          }

Upvotes: 1

Related Questions