Как перезагрузить таблицу html при изменении данных firebase
я использую таблицу для отображения данных из firebase, проблема в том, что каждый раз, когда я обновляю данные, я получаю дубликат таблицы вместо перезагруженных данных.
Я пробовал несколько разных способов, но ни один не работает. Также я не опытный программист. это мой код. Вся функция myFunction вызывается каждый раз при изменении значения select.
<html>
<head>
<title>OSA</title>
<link href = "https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel = "stylesheet">
<link rel = "stylesheet" href = "style.css" />
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div>
<select id = "mySelect" class = "mySelect" onchange = "getData()">
<option>Select Class</option>
<option value = "ArtificialIntelligence">Artificial Intelligence</option>
<option value = "MachineLearning">Machine Learning</option>
<option value = "NaturalLanguageInterface">Natural Language Interface</option>
</select>
</div>
<div class = "studentTable-div" id = "table-div">
<p>
<h2 class = "h2" id = "tblText""></h2>
</p>
<button class = "button" onclick = "refresh()">Refresh</button>
<table id = "tbl_users_list" class = "w3-table w3-striped w3-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PRESENT</td>
</tr>
</table>
</div>
</body>
<script>
//creating reference to the database.
var database = firebase.database();
var x;
function getData() {
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
});
});
var text = x.split(/(?=[A-Z])/).join(" ");
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
}
function setText(){
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
}
function resetTable(){
var table = document.getElementById("tbl_users_list");
//or use : var table = document.all.tableid;
for(var i = table.rows.length - 1; i > 0; i--)
{
table.deleteRow(i);
}
}
</script>
<script src = "https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBAV157BePawASuItu_Ycvv8p96SQcuFVg",
authDomain: "osattendance-352c4.firebaseapp.com",
databaseURL: "https://osattendance-352c4.firebaseio.com",
projectId: "osattendance-352c4",
storageBucket: "osattendance-352c4.appspot.com",
messagingSenderId: "91858851284"
};
firebase.initializeApp(config);
</script>
<script src = "index.js"></script>
<script src = "https://www.puck-js.com/puck.js"></script>
</body>
</html>
Все, что мне нужно, это чтобы таблица оставалась такой, какая она есть, и перезагружала только обновленные поля. Спасибо
Хорошо, как вы видите, это мой главный экран. с выбором html пользователь может выбирать разные классы, данные в таблице должны отображаться соответственно, вместо этого каждый раз, когда я выбираю другой класс, таблица становится все больше и больше по мере загрузки данных, которые я выбрал.
Это мой файл json для базы данных, не что иное, как количество занятий со студентами.
{
"Classes" : {
"ArtificialIntelligence" : {
"code" : "code",
"students" : {
"1212" : {
"name" : "jacob",
"present" : "false",
"surname" : "kalas"
},
"2323" : {
"name" : "chanelle",
"present" : "true",
"surname" : "lindsay"
},
"3434" : {
"name" : "adam",
"present" : "true",
"surname" : "smith"
},
"4545" : {
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
},
"5656" : {
"name" : "derek",
"present" : "false",
"surname" : "salak"
},
"6767" : {
"name" : "ernest",
"present" : "false",
"surname" : "brown"
},
"7878" : {
"name" : "liam",
"present" : "false",
"surname" : "day"
},
"8989" : {
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
},
"9191" : {
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
},
"9898" : {
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
}
}
},
"MachineLearning" : {
"code" : "code",
"students" : {
"1111" : {
"name" : "student1",
"present" : "true",
"surname" : "kalas"
},
"2222" : {
"name" : "student1",
"present" : "false",
"surname" : "lindsay"
},
"3333" : {
"name" : "jim",
"present" : "false",
"surname" : "smith"
},
"4444" : {
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
},
"5555" : {
"name" : "derek",
"present" : "false",
"surname" : "salak"
},
"6666" : {
"name" : "ernest",
"present" : "false",
"surname" : "brown"
},
"7777" : {
"name" : "liam",
"present" : "false",
"surname" : "day"
},
"8888" : {
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
},
"9191" : {
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
},
"9999" : {
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
}
}
},
"NaturalLanguageInterface" : {
"code" : "code",
"students" : {
"1212" : {
"name" : "kate",
"present" : "false",
"surname" : "kalas"
},
"2323" : {
"name" : "Tom",
"present" : "true",
"surname" : "lindsay"
},
"3434" : {
"name" : "pauly",
"present" : "true",
"surname" : "smith"
},
"4545" : {
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
},
"5656" : {
"name" : "derek",
"present" : "false",
"surname" : "salak"
},
"6767" : {
"name" : "ernest",
"present" : "false",
"surname" : "brown"
},
"7878" : {
"name" : "liam",
"present" : "false",
"surname" : "day"
},
"8989" : {
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
},
"9191" : {
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
},
"9898" : {
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
}
}
}
}
}
не могли бы вы показать мне, как, если вы знаете? Пробовал несколько способов и ничего.
1-Вы хотите, чтобы существующие данные из таблицы были удалены, а новые данные были обновлены в этом месте?? или 2- вы хотите, чтобы старые данные в таблице присутствовали, а новые данные добавлялись ниже под существующими?? Как это вы хотите??
1-Я хочу, чтобы существующие данные из таблицы были удалены, а новые данные были обновлены в этом месте.
Можете ли вы показать нам свои данные базы данных в реальном времени? Экспортируйте данные в реальном времени из своей базы данных и вставьте их Нажмите меня, чтобы экспортировать данные из базы данных. Также вы можете показать нам повторяющиеся данные, которые добавляются в Html, и какие данные вы ожидаете отобразить в таблице ?? С кодом функции, которым вы поделились выше, мы можем видеть только то, что вы добавляете данные в файл Db. Можете ли вы добавить больше кода?
функция отлично работает при отображении данных, только когда данные обновляются или если функция запускается более одного раза, таблица не заменяется новыми данными, а вместо этого в нее добавляются новые данные.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Итак, я нашел решение этой проблемы, это не ожидаемое решение, поскольку таблицу необходимо обновлять вручную, чтобы отображать обновленные данные, но это работает, и дубликатов нет. Я создал функцию, которая очищает таблицу. функция выглядит следующим образом и вызывается в начале myFunction()
function resetTable(){
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
{
table.deleteRow(i);
}
}
функция getData () {
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
});
});
}
Пожалуйста, если вы знаете, как это сделать, пожалуйста, ответьте на вопрос.
Как упомянул Эндрю, ваша цель - получить последние данные для удаления существующих данных, вы можете запустить функцию для удаления существующих данных перед методом forEach, я вижу, что вы сделали.
да, единственная проблема в том, что теперь данные не в реальном времени, таблицу нужно обновлять, так как каждый раз, когда я вручную обновляю данные в консоли firebase, я все равно получаю дубликат.
Можете ли вы отредактировать свой вопрос, добавив все файлы HTML, JS, чтобы я мог понять, как устроен ваш код, и помочь вам.
по вашему запросу там не так много, буквально выбор и таблица.
вы можете использовать setInterval, чтобы перезагрузить набор данных за несколько секунд и проверить, был ли он обновлен.
// you have some var'data' that stores the current data...
function check_updated(){
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
databaseRef.limitToLast(1).once('value', function(snapshot) {
// CHECK IF CHANGED - GRAB THE LAST ITEM
// 'LastValue' should be implemented in your code
if (snapshot.val().key != LastValue.key){
resetTable();
}
}
}
var reloadingInterval = setInterval(check_updated, 10000);
Перед
snapshot.forEach...вы можете удалить все строки в своей таблице (кроме строки заголовка).