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

问题描述：

我目前正在使用Firebase构建简单的电子商务网站并遇到问题。对于后端，我尝试使用Firebase数据库数据填充HTML表格。使用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); 
}

答

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表格

相关推荐