How to get Value from Firebase and add in HTML Table using JavaScript

Question

I'm trying to get loggedin Used Data from firebase and add show into HTML Table this is my database structure"

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

I'm simply tring to get value date and status value from firebase make table in html to show data. I'm able to login user using firebase auth google. and able to post value aswell. just not able to get value correctly and show in table. Here is what i tried to get value from firebase and add into html table:

 // 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); } }); } });

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

Answer 1

Got the Solutions now it Worked: Here is Script Changes:

 <script> // 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).once("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); } }); } }); </script>