Question

我正在使用一个表来显示来自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 select时，用户可以选择不同的类，表中的数据应相应显示，相反，每次我选择不同的类时，表都会越来越大，因为它会加载我选择的数据。

这是我用于数据库的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"
        }
      }
    }
  }
}

Answer 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);

Answer 2

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

function resetTable(){

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

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

}

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;      


  });
});

}

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

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

2 个答案: