使用 Firebase 数据库数据填充 HTML 表答案

【问题标题】：Populate HTML table with Firebase Database data使用 Firebase 数据库数据填充 HTML 表
【发布时间】：2017-02-14 05:53:05
【问题描述】：

我目前正在使用 Firebase 构建一个简单的电子商务网站，但遇到了问题。对于后端，我正在尝试使用 Firebase 数据库数据填充 HTML 表。

目前，数据正在出现，我可以填充表格的主体，但同时我想使用相同的快照为表格创建标题。我已经能够做到这一点，但是它会为数据库中的每条记录重复。所以两条记录有两个标题。

我怎样才能简单地捕获快照的索引并且只完成一次createHeaders 函数，或者有更有效的方法来做到这一点。以下是我正在使用的JS：

itemsRef.on('value', function(snapshot) {
    snapshot.forEach(function(child) {
        createHeaders(child.val());
        showItems(child.val(), child.key);
    });
});

function createHeaders(data) {
    var html = '';
    html += '<tr>';
    $.each(data, function(key, value) {
        html += '<th>' + key + '</th>';
    });
    html += '<th class="text-right">';
    html += '</tr>';

    $("#tableHeaders").append(html);
}

function showItems(data, key) {
    var html = '';
    html += '<tr>';
    $.each(data, function(key, value) {
        html += '<td>' + value + '</td>';
    });
    html += '<td class="text-right"><a href="/" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i> Edit</a> <a href="/" class="btn btn-danger btn-sm"><i class="fa fa-times"></i> Delete</a></td>';
    html += '</tr>';

    $('#results').append(html);
}

【问题讨论】：

标签： html firebase firebase-realtime-database

【解决方案1】：

snapshot.forEach(function(child) {
    createHeaders(child.val());
    showItems(child.val(), child.key);
});

.forEach 函数正如它所说的那样：它将为当前参考位置的数据库中的每个元素运行一次。

由于您每次加载数据时都调用createHeaders()，因此您每次都将重新创建标头。

您可以做的是创建一个简单的isFirst 布尔值，并且forEach 按顺序运行（我假设您的列标题是首先要返回的内容。）那么您所需要的只是类似这个：

snapshot.forEach(function(child) {
    if(isFirst){
        createHeaders(child.val());
        isFirst = false; //So it only will run once.
    }

    showItems(child.val(), child.key);
});

（您可能还需要在其中使用else{}，我没有深入研究代码。）

【讨论】：