【发布时间】:2020-01-07 22:44:55
【问题描述】:
我是 firebase 新手,对它不太熟悉。我正在尝试以 HTML 表的形式将我的 firebase 数据库放到前端。 我通过谷歌搜索得到了一些帮助,但现在我卡住了。 我无法将数据填充到我的 HTML 表中。
这是我嵌入的 HTML 和 JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Customer table</title>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<body>
<table class="table table-striped" id="ex-table">
<tr id="tr">
<th>Email</th>
<th>Name</th>
<th>Phone</th>
</tr>
</table>
<script>
var config = {
apiKey: "AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0",
authDomain: "testproject-e2435.firebaseapp.com",
databaseURL: "https://testproject-e2435.firebaseio.com",
projectId: "testproject-e2435",
storageBucket: "testproject-e2435.appspot.com",
messagingSenderId: "276265166035",
};
firebase.initializeApp(config);
var database = firebase.database().ref().child('Customer');
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var Email = data.val().Email;
var Name = data.val().Name;
var Phone = data.val().Phone;
content += '<tr>';
content += '<td>' + Email + '</td>'; //column1
content += '<td>' + Name + '</td>';//column2
content += '<td>' + Phone + '</td>';//column2
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>
</body>
</html>
我附上了我的数据库结构
【问题讨论】:
标签: javascript html firebase firebase-realtime-database