Question

我目前正在使用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);
}

Answer 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{}，我没有深入研究代码。）

使用Firebase数据库数据填充HTML表格

1 个答案: