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

问题描述

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）