JavaScript on how to display data on a HTML page and in the Firebase Database
I had trouble creating a database on my HTML page. It was possible with the help of Code Crew. Here is the code that works. I am posting some of the code I used.
HTML File:
<div id=”localChildDB”>
<table class=”table table-hover”>
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>Height</th>
<th>Age</th>
<th>Weight</th>
</tr>
</thead>
<tbody id=”childTableTag”>
<! — List of participants →
</tbody>
</table>
</div><! — end child div DB table →
JS File:
function loadPersonCT() {//table
var currentCPerson;
var personCRow;
//
for (var i = 0; i < personCDB.length; i++) {
currentCPerson = personCDB[i];
//
if (currentCPerson) {
personCRow = ‘<tr>’ +
‘<td>’ + currentCPerson.inputFirstC + ‘</td>’ +
‘<td>’ + currentCPerson.inputLastC + ‘</td>’ +
‘<td>’ + currentCPerson.inputHeightC + ‘</td>’ +
‘<td>’ + currentCPerson.inputAgeC + ‘</td>’ +
‘<td>’ + currentCPerson.inputWeightC + ‘</td>’ +
‘</tr>’;
$(‘#childTableTag’).append(personCRow);
}
}
}
function updatePersonCT(personCObj) {
var personCRow = ‘<tr>’ +
‘<td>’ + personCObj.inputFirstC + ‘</td>’ +
‘<td>’ + personCObj.inputLastC + ‘</td>’ +
‘<td>’ + personCObj.inputHeightC + ‘</td>’ +
‘<td>’ + personCObj.inputAgeC + ‘</td>’ +
‘<td>’ + personCObj.inputWeightC + ‘</td>’ +
‘</tr>’;
$(‘#childTableTag’).append(personCRow);
}
<! — →
Now, the code to use Firebase’s database. The code above had to be replaced with the code below after the Firebase URL was opened
JS File:
var ref = new Firebase(“your Firebase URL where data will be stored”);