Javascript firebase数据更改时如何重新加载html表_Javascript_Html_Firebase_Firebase Realtime Database

Javascript firebase数据更改时如何重新加载html表

javascript html firebase

Javascript firebase数据更改时如何重新加载html表,javascript,html,firebase,firebase-realtime-database,Javascript,Html,Firebase,Firebase Realtime Database,我使用一个表来显示来自firebase的数据，问题是每次我更新数据时，都会得到一个表的副本，而不是重新加载的数据我试过几种不同的方法，但都不管用。而且我不是一个有经验的程序员。这是我的密码。每次更改select的值时，都会调用整个函数myFunction <html> <head> <title>OSA</title> <link href="https://fonts.googleapis.com/css?family=Nunit

我使用一个表来显示来自firebase的数据，问题是每次我更新数据时，都会得到一个表的副本，而不是重新加载的数据

我试过几种不同的方法，但都不管用。而且我不是一个有经验的程序员。这是我的密码。每次更改select的值时，都会调用整个函数myFunction

<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>

好的，我已经找到了这个问题的解决方案，它不是预期的解决方案，因为必须手动刷新表才能显示更新的数据，但它可以工作，并且没有重复项。我创建了一个清除表的函数。函数如下所示，在myFunction（）的开头调用

}

函数getData（）{

}

如果您知道正确的方法，请回答问题。

您可以使用

setInterval

在几秒钟内重新加载数据集，并检查数据集是否已更新

//您有一些存储当前数据的变量'data'。。。
函数检查_更新（）{
var-databaseRef=firebase.database（）.ref（'Classes/'+x+'/students'）；
databaseRef.limitToLast（1）.once（'value'，函数（快照）{
//检查是否已更改-抓取最后一项
//“LastValue”应该在代码中实现
if（snapshot.val（）.key！=LastValue.key）{
可重置（）；
}
}
}
var reloadingInterval=setInterval（检查更新，10000）；

在快照.forEach之前…您可以删除表中的所有行（标题行除外）。如果您知道，请告诉我如何操作？我已经尝试了几种方法，但什么都没有。1-您希望删除表中的现有数据，并在该位置更新新数据？？或2-您希望表中的旧数据存在，并在现有数据下添加新数据？？您希望如何操作？1-我希望现有数据来自要删除的表和要在该位置更新的新数据。您可以向我们显示您的实时数据库数据吗..从数据库中导出实时数据并粘贴它。您还可以向我们显示正在添加到Html中的重复数据以及您希望在表中显示的数据吗？使用您在上面共享的功能代码，我们可以n只看到您正在将数据添加到数据库中。您可以添加更多代码吗？正如Andrew提到的，您的目标是获取最新数据以删除现有数据，您可以在forEach方法之前运行一个函数删除现有数据。我看到这就是您所做的。是的，唯一的问题是，现在数据不是实时的，必须刷新表每次我在firebase控制台中手动更新数据时，我仍然会得到一个副本。你能用添加的所有HTML、JS文件编辑你的问题吗？这样我就可以了解你的代码并帮助你解决问题。根据你的请求，没有多少，确切地说是一个select和一个表。

{
  "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"
        }
      }
    }
  }
}

function resetTable(){

var table = document.getElementById("tbl_users_list");

for(var i = table.rows.length - 1; i > 0; i--)
{
    table.deleteRow(i);
}

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;      


  });
});