在不重复旧值的情况下将Firebase DB值获取到HTML表中 [英] Getting Firebase DB values to HTML tables without repetition of older values
问题描述
我正在尝试将我的Firebase DB值显示到HTML表中.添加值时，前端表应自动更新，而无需刷新.我能够做到这一点，但是它也以某种方式将最新值附加在表的顶部.不知道怎么了
I am trying to display my Firebase DB values to a HTML table. When I add the values, my front end table should automatically be updated without the need for a refresh. I am able to do that but it somehow also appends the most recent value at the top of the table. Don't know whats wrong
这是我的HTML和JS嵌入其中:
Here is my HTML and JS embedded within:
<!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",
appId: "1:276265166035:web:8be86e78d3e3cdaeca2026",
measurementId: "G-8ZFYCDXPR2"
};
firebase.initializeApp(config);
var database = firebase.database().ref().child('testproject-e2435/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);
}
});
database.limitToLast(1).on('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>
推荐答案
如果我正确理解了您的要求(当添加值时，前端表应自动更新而无需刷新")，您只应使用 on() 方法和 child_added 事件.
If I correctly understand your requirement ("When I add the values, my front end table should automatically be updated without the need for a refresh") you should only declare a listener with the on() method and the child_added event.
You don't need to combine a call to the once() method PLUS a listener (with the on('value', ...) method) because, as explained in the documentation:
添加子项的事件
此事件将在此为每个初始子对象一次触发一次 位置，并且每次生一个新孩子时都会再次触发 添加.
This event will be triggered once for each initial child at this location, and it will be triggered again every time a new child is added.
以下应能工作:
database.on('child_added', function (snapshot) {
var content = '';
var Email = snapshot.val().Email;
var Name = snapshot.val().Name;
var Phone = snapshot.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);
});
这篇关于在不重复旧值的情况下将Firebase DB值获取到HTML表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
