I am trying to get and show my data from the firebase database to the HTML page in a table form, but no output showing. I attached a screenshot of my database below. I have been trying for like days and can’t solve it. Can someone help me to point out what my problem is? For security purposes, I erased the details of my firebase configuration there.
<body>
<table>
<thead>
<th>Sno</th>
<th>First Name</th>
<th>Second Name</th>
<th>Email</th>
<th>LastLogin</th>
<th>Confirm Password</th>
</thead>
<tbody id="tbody1">
</tbody>
</table>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
<script id="MainScript">
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
//---------------------GET ALL DATA-------------------------------//
function SelectAllData(){
firebase.database().ref('admins').once('value',
function(AllRecords){
AllRecords.forEach(
function(CurrentRecord){
var firstName = CurrentRecord.val().first_name;
var secondName = CurrentRecord.val().second_name;
var email= CurrentRecord.val().email;
var lastLogin = CurrentRecord.val().last_login;
var conpassword = CurrentRecord.val().confirm_password;
AddItemsToTable(firstName,secondName,email,lastLogin,conpassword);
}
);
});
}
window.onload = SelectAllData;
//------------------filling the table-------------------//
var stdNo = 0;
function AddItemsToTable(firstName,secondName,email,lastLogin,conpassword){
var tbody = document.getElementById('tbody1');
var trow = document.createElementById('tr');
var td1 = document.createElementById('td');
var td2 = document.createElementById('td');
var td3 = document.createElementById('td');
var td4 = document.createElementById('td');
var td5 = document.createElementById('td');
var td6 = document.createElementById('td');
td1.innerHTML= ++stdNo;
td2.innerHTML= firstName;
td3.innerHTML= secondName;
td4.innerHTML= email;
td5.innerHTML= lastLogin;
td6.innerHTML= conpassword;
trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);
trow.appendChild(td6);
tbody.appendChild(trow);
}
</script>
</body>
The way I pushed the data into database
// Set up our register function
function register () {
// Get all our input fields
email = document.getElementById('email').value
password = document.getElementById('password').value
first_name = document.getElementById('first_name').value
second_name = document.getElementById('second_name').value
confirm_password = document.getElementById('confirm_password').value
// Validate input fields
if (validate_email(email) == false || validate_password(password) == false) {
alert('Email or Password is Outta Line!!')
return
// Don't continue running the code
}
if (validate_field(first_name) == false || validate_field(second_name) == false || validate_field(confirm_password) == false) {
alert('One or More Extra Fields is Outta Line!!')
return
}
// Move on with Auth
auth.createUserWithEmailAndPassword(email, password)
.then(function() {
// Declare admin variable
var user = auth.currentUser
// Add this admin to Firebase Database
var database_ref = database.ref()
// Create Admin data
var user_data = {
email : email,
first_name : first_name,
second_name : second_name,
confirm_password : confirm_password,
last_login : Date.now()
}
// Push to Firebase Database
database_ref.child('admins/' + user.uid).set(user_data)
// DOne
alert('Admin Account Created!!')
window.location = "login.html";
})
.catch(function(error) {
// Firebase will use this to alert of its errors
var error_code = error.code
var error_message = error.message
alert(error_message)
});
}