我想从 Firebase 实时数据库中获取数据并想在我的 HTML 页面中显示

Question

我想从 Firebase 实时数据库中获取数据并将其显示在我的 HTML 页面上。我在控制台中完美地获取了所有数据，但在我的 HTML 页面上看不到它。我也用过for循环，但它不显示数据。

这是我的完整代码：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();

Answer 1

将您的 JS 代码更改为以下代码即可。

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