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

【问题标题】：How to reload html table when firebase data changesfirebase数据更改时如何重新加载html表
【发布时间】：2019-03-27 19:18:22
【问题描述】：

我正在使用一个表格来显示来自 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>

我只需要让表格保持原样，并且只重新加载更新的字段。谢谢

好的，如您所见，以下是我的main screen 。使用 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"
        }
      }
    }
  }
}

【问题讨论】：

在snapshot.forEach... 之前，您可以删除表格中的所有行（标题行除外）。
如果你知道的话，能告诉我怎么做吗？我尝试了几种方法，没有任何效果。
1-您希望删除表中的现有数据并在该位置更新新数据？？或2-您希望表中的旧数据存在，并将新数据添加到现有数据的下方？你想要怎么样？？
1-我希望删除表中的现有数据并在该位置更新新数据。
你能告诉我们你的实时数据库数据吗..从你的数据库中导出实时数据并粘贴Click me to export data from Database。您还可以向我们展示添加到 Html 中的重复数据以及您希望在表中显示哪些数据？使用您在上面共享的功能代码，我们只能看到您正在将数据添加到 Db。你能添加更多代码吗？

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

您可以在几秒钟内使用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);

【讨论】：

【解决方案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;      


  });
});

}

如果你知道正确的做法，请回答问题。

【讨论】：

正如 Andrew 所说，您的目标是获取最新数据以删除现有数据，您可以在 forEach 方法之前运行一个函数来删除现有数据，我看到这就是您所做的。
是的，唯一的问题是现在数据不是实时的，表必须刷新，因为每次我在 firebase 控制台中手动更新数据时，我仍然会得到重复。
你能用添加的所有 HTML、JS 文件编辑你的问题吗？这样我就可以弄清楚你的代码是怎样的并帮助你。
根据您的要求，没有太多，实际上是一个选择和一个表格。