如何使用JavaScript从Firebase实时数据库获取嵌套捐赠数据

根据你的需求，结合已有的用户数据获取逻辑，下面是适配Donation节点嵌套数据的获取与表格展示实现方案：

1. 编写Donation数据获取函数 #

针对Donation节点的嵌套结构（按用户UID分组或直接存储捐赠记录），分两种场景处理：

场景1：Donation节点直接存储所有捐赠记录 #

如果Donation下是独立的捐赠记录节点，直接遍历即可：

function GetAllDonationDataRealtime() {
    const dbRef = ref(database, 'Donation');

    onValue(dbRef, (snapshot) => {
        const donations = [];
        snapshot.forEach(childSnapshot => {
            // 将节点key作为捐赠ID，合并其他字段
            const donation = {
                id: childSnapshot.key,
                ...childSnapshot.val()
            };
            donations.push(donation);
        });
        AddAllDonationItemsToTable(donations);
    });
}

场景2：Donation节点按用户UID分组嵌套存储 #

如果Donation下先按用户UID分组，再存储该用户的捐赠记录，需要嵌套遍历：

function GetAllDonationDataRealtime() {
    const dbRef = ref(database, 'Donation');

    onValue(dbRef, (snapshot) => {
        const donations = [];
        snapshot.forEach(userSnapshot => {
            // 遍历单个用户下的所有捐赠记录
            userSnapshot.forEach(donationSnapshot => {
                const donation = {
                    donorUid: userSnapshot.key, // 记录捐赠人UID
                    id: donationSnapshot.key,
                    ...donationSnapshot.val()
                };
                donations.push(donation);
            });
        });
        AddAllDonationItemsToTable(donations);
    });
}

2. 编写捐赠数据的表格渲染函数 #

根据你的实际捐赠字段（如物品名称、数量、捐赠日期等），调整表格渲染逻辑：

// 批量渲染捐赠数据到表格
function AddAllDonationItemsToTable(donations) {
    const tbody = document.getElementById('donation-tbody'); // 确保HTML表格tbody有对应ID
    tbody.innerHTML = "";
    donations.forEach(donation => {
        // 替换为你实际的捐赠字段
        AddDonationItemToTable(
            donation.id,
            donation.itemName,
            donation.quantity,
            donation.donationDate,
            donation.donorUid
        );
    });
}

// 单条捐赠数据插入表格行
function AddDonationItemToTable(id, itemName, quantity, date, donorUid) {
    const tbody = document.getElementById('donation-tbody');
    const row = tbody.insertRow();
    // 按顺序创建单元格并填充数据
    row.insertCell(0).textContent = id;
    row.insertCell(1).textContent = itemName;
    row.insertCell(2).textContent = quantity;
    row.insertCell(3).textContent = date;
    row.insertCell(4).textContent = donorUid;
}

3. 页面加载时启动数据获取 #

在页面加载时同时加载用户和捐赠数据：

window.onload = function() {
    GetAllDataRealtime(); // 原用户数据加载逻辑
    GetAllDonationDataRealtime(); // 新增捐赠数据加载逻辑
};

注意事项 #

• 请根据数据库中Donation节点的实际字段，调整AddDonationItemToTable的参数和单元格内容。
• 确保HTML页面中存在用于展示捐赠数据的表格，且tbody的ID与代码中donation-tbody一致（或自行修改代码中的ID匹配）。

内容的提问来源于stack exchange，提问作者LAAA