如何使用JavaScript从Firebase获取数据并展示到HTML表格中

我已通过Google Firebase Auth实现用户登录，也能向Firebase提交数据，但无法正确获取已登录用户的出勤数据并展示到HTML表格中。

我的Firebase数据库结构如下：

{
  "attendance": {
    "7-----------asdasdasd-----": {
      "2023-1-9": {
        "status": "success"
      }
    }
  }
}

我希望获取其中的日期和status值并在HTML表格中展示，以下是我尝试的代码：

尝试的JavaScript代码 #

// Get the table element
var table = document.getElementById("attendance-table");

// Handle auth state changes
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in
    var userId = firebase.auth().currentUser.uid;
    firebase.database().ref("attendance/" + userId).on("value", function(snapshot) {
      // Clear the table
      table.innerHTML = "";

      // Get the attendance data
      var attendanceData = snapshot.val();
      var attendanceKeys = Object.keys(attendanceData);

      // Add a row to the table for each attendance record
      for (var i = 0; i < attendanceKeys.length; i++) {
        var date = attendanceKeys[i];
        var status = attendanceData[attendanceKeys[i]].status;
        var row = document.createElement("tr");
        var dateCell = document.createElement("td");
        var statusCell = document.createElement("td");
        dateCell.innerHTML = date;
        statusCell.innerHTML = status;
        row.appendChild(dateCell);
        row.appendChild(statusCell);
        table.appendChild(row);
      }
    });
  }
});

尝试的HTML代码 #

<table id="attendance-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="attendance-table-body"></tbody>
  <tfoot></tfoot>
</table>

你的代码存在三个核心问题：直接清空整个表格会丢失表头、未处理无数据的异常情况、操作对象选择错误。以下是修复后的代码：

修复后的JavaScript代码 #

// 定位表格tbody元素，而非整个table
var tableBody = document.getElementById("attendance-table-body");

// 监听用户认证状态变化
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // 直接用回调参数中的user对象获取uid，无需重复调用currentUser
    var userId = user.uid;
    firebase.database().ref("attendance/" + userId).on("value", function(snapshot) {
      // 仅清空tbody内容，保留表头结构
      tableBody.innerHTML = "";

      var attendanceData = snapshot.val();
      // 处理无出勤数据的情况，避免报错
      if (!attendanceData) {
        var emptyRow = document.createElement("tr");
        var emptyCell = document.createElement("td");
        emptyCell.colSpan = 2;
        emptyCell.textContent = "暂无出勤记录";
        emptyRow.appendChild(emptyCell);
        tableBody.appendChild(emptyRow);
        return;
      }

      var attendanceKeys = Object.keys(attendanceData);
      for (var i = 0; i < attendanceKeys.length; i++) {
        var date = attendanceKeys[i];
        var status = attendanceData[date].status;
        var row = document.createElement("tr");
        var dateCell = document.createElement("td");
        var statusCell = document.createElement("td");
        
        // 用textContent替代innerHTML，更安全且适合纯文本场景
        dateCell.textContent = date;
        statusCell.textContent = status;
        
        row.appendChild(dateCell);
        row.appendChild(statusCell);
        tableBody.appendChild(row);
      }
    });
  }
});

关键修复点说明 #

• 操作对象改为表格的tbody，避免清空整个表格导致表头丢失；
• 直接使用回调参数中的user.uid获取用户ID，比调用firebase.auth().currentUser.uid更可靠；
• 添加无数据判断，当用户没有出勤记录时显示提示信息，避免Object.keys抛出错误；
• 用textContent替代innerHTML，防止潜在的XSS风险，同时更适配纯文本内容的渲染需求。

内容的提问来源于stack exchange，提问作者akshay gadekar