Question

我想从数据库中获取数据。然后更改它们。然后显示。请告诉我如何解决此问题以及为什么我不能解决。这是我的代码

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]]：“已解决” [[PromiseValue]]：未定义

Answer 1

您尝试将数据传递到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);
}))

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

1 个答案: