Javascript 如何从firebase实时数据库获取和显示数据？

我想从数据库中获取数据。然后改变它们。然后显示。 请告诉我如何解决这个问题，为什么我不能这样做。 这是我的密码

let firebaseConfig = {...};

firebase.initializeApp(firebaseConfig);

let ref = firebase.database().ref('/data')

class DataTable {
    constructor(parent) {
        this.parent = parent;
    }
    buildTable(data) {
        this.data = data;
        const keys = Object.keys(data[0]);
        console.log(keys)
        let div = document.createElement('div');
        let tab = document.createElement('table');
        let tb = document.createElement('tbody');

        const buildTableBody = () => {
            for (let a of data) {
                let tr = document.createElement('tr');
                keys.forEach((key) => {
                    let td = document.createElement('td');
                    let tn = document.createTextNode(a[key])
                    td.appendChild(tn);
                    tr.appendChild(td);
                });
                tb.appendChild(tr);
            }
            tab.appendChild(tb);
            div.appendChild(tab);
        }
        this.parent.appendChild(div);
        buildTableBody()
    }
}


const table = new DataTable(document.body);
table.buildTable(
    ref.once("value").then((snap) => {
        const data = snap.val()

        data.map(i => {
            let res = {
                '#': Number(i.id),
                'Name': i.name,
            };

            return Object.entries(res).reduce((memo, [key, value]) => {
                if (value) {
                    return {
                        ...memo,
                        [key]: value
                    }
                } else {
                    return memo;
                }
            }, {})
        })
    }))

---

但是它返回给我Promise{}proto：Promise[[PromiseStatus]]：“resolved”[[PromiseValue]]：未定义的

您试图将数据传递到

buildTable

的方式不起作用。如果在

buildTable

中放置断点，您将能够看到它

原因是数据是从Firebase异步加载的，需要数据的任何代码都必须从

once（）

回调内部调用。因此，您需要将对

buildTable

的调用放在该回调中，如下所示：

ref.once("value").then((snap) => {
    const data = snap.val()

    let result = data.map(i => {
        let res = {
            '#': Number(i.id),
            'Name': i.name,
        };

        return Object.entries(res).reduce((memo, [key, value]) => {
            if (value) {
                return {
                    ...memo,
                    [key]: value
                }
            } else {
                return memo;
            }
        }, {})
    })
    table.buildTable(result);
}))

---

您试图将数据传递到

buildTable

的方式不起作用。如果在

buildTable

中放置断点，您将能够看到它

原因是数据是从Firebase异步加载的，需要数据的任何代码都必须从

once（）

回调内部调用。因此，您需要将对

buildTable

的调用放在该回调中，如下所示：

ref.once("value").then((snap) => {
    const data = snap.val()

    let result = data.map(i => {
        let res = {
            '#': Number(i.id),
            'Name': i.name,
        };

        return Object.entries(res).reduce((memo, [key, value]) => {
            if (value) {
                return {
                    ...memo,
                    [key]: value
                }
            } else {
                return memo;
            }
        }, {})
    })
    table.buildTable(result);
}))