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

來源

2017-02-14 user1881482

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{}還有，我沒有深入研究過深入代碼。）

來源

2017-02-14 05:59:17 FibreChips

使用Firebase數據庫數據填充HTML表格

回答

相關問題