如何修复此Firebase数据检索？

Question

I need some help in displaying all the values in a Firebase database, in a table. As is, it is just displaying the first value in the table alone

Results:

var tblCodes = document.getElementById('tbl_qrcode_list');
var databaseRef = firebase.database().ref('qrcode/');
var rowIndex = 1;

databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();

var row = tblCodes.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.qrcode_desc));
rowIndex = rowIndex + 1;
 });
});

function save_code(){
var qrcode_desc = document.getElementById('qrcode_desc').value;
var qrcode_grp = document.getElementById('qrcode_grp').value;
var qrcode_stg = document.getElementById('qrcode_stg').value;
var qrcode_img = document.getElementById('qrcode_img').value;

var qrid = firebase.database().ref().child('qrcode').push().key;

var data = {
  qrcode_id: qrid,
  qrcode_desc: qrcode_desc,
  qrcode_grp: qrcode_grp,
  qrcode_stg: qrcode_stg,
  qrcode_img: qrcode_img,
 }

Answer 1

You need to create a cell for each value here :

you need to create cells for each data

var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);

cellName.appendChild(document.createTextNode(childData.qrcode_desc));
cellName.appendChild(document.createTextNode(childData.qrcode_grp));
cell3.appendChild(document.createTextNode(childData.qrcode_id));
cell4.appendChild(document.createTextNode(childData.qrcode_img));
cell5.appendChild(document.createTextNode(childData.qrcode_stg));