如何顯示HTML表格火力rumtime數據庫中的數據

Question

我想從消防基礎數據庫我列出的數據顯示，以表 我這樣做代碼

firebase.initializeApp(config); 
var ref = firebase.database().ref('customer'); 

ref.on('value', function(snapshot) { 
    console.log(snapshot.val()); 

}); 

Answer 1

您可以在未來的項目使用下面的代碼迴路從通過JavaScript數據庫，並編寫HTML內容：

var myTable = "<table border='1' width='100%'><tr>"; 

ref.on('value', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     var item = childSnapshot.val(); 
     var firstName = childSnapshot.val().firstName //Example of value 
     myTable += "<td align='center'>" + firstName + "</td>"; 
    }); 
}); 

myTable += "</tr></table>"; 

document.getElementById("outputDiv").innerHTML = myTable; 

但是這將是更好地使用JS框架「注入」從JavaScript數據到你的HTML DOM，即Vue.js或淘汰賽，只提兩個例子。