как получить и отобразить данные из базы данных Firebase в реальном времени?

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]]: "resolved" [[PromiseValue]]: undefined

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