使用Javascript从Firebase数据库显示数据

Question

我有一个包含四列ID，NAME，SURNAME和RECIPIENT的表

每个按钮具有不同的值，该值等于与按钮在同一行中的ID的编号。 例如，第一个按钮的值为2，第二个按钮3为最后一个按钮123，所有按钮的id为contact。 每次按下按钮时，都会将该按钮的值存储在带有名称输入的变量中。 我的源代码是：

var input; //prepare var to save contact name/ PLACE outside document ready
$(function() {
 // contact form animations
 $('button[id="contact"]').click(function() {
   input = $(this).val(); //set var contactName to value of the pressed button

    $('#contactForm').fadeToggle();

  })
  $(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();

    }
  });

});

然后我想使用此变量从Firebase数据库中获取与当前变量相对应的一些文件。 在我的Firebase数据库中，我有一个带有名称文件的文件夹，该文件具有三个辅助文件夹，这些文件夹对应于我拥有的三个按钮的值

通常，我单击三个按钮之一（假设第一列中的按钮），然后存储按钮的值（因此现在输入值将等于2）。 然后，我将文件2 //中存储在firebase数据库中的所有信息都服药。 我已经实现了它的源代码，但是我没有得到任何结果，当我运行检查控制台时，我没有得到任何错误。 源代码如下：

var databaseRef =  firebase.database().ref().child(`files/${input}/`);
var tblUsers = document.getElementById('tbl_users_list');

var rowIndex = 1;

databaseRef.once('value',function(snapshot){
snapshot.forEach(function(childsnapshot) { 
    var childKey = childsnapshot.key;
    var childData = childsnapshot.val();
    //var urls = childData.url;

    var row = tblUsers.insertRow(rowIndex);
    var cellId = row.insertCell(0);
    var cellName = row.insertCell(1);
    var button = row.insertCell(2);

    var itd = document.createElement('input');
    itd.setAttribute("type","button");
    itd.setAttribute("value","View");
    itd.onclick=function () {
        window.open(childData.url);
    };

    cellId.appendChild(document.createTextNode(childData.filename));
    cellName.appendChild(document.createTextNode(childData.created));
    button.appendChild(itd);

    rowIndex = rowIndex+1;
    //document.write(username);


    })


  });

如果在上述源代码中更改了行var databaseRef = firebase.database().ref().child(`files/${input}/`); 替换变量我将按钮的值存储在第一个函数中的2，3或123中，我得到结果，所以似乎问题出在那儿，但我不知道该怎么办。

有人可以帮帮我吗 ？ 在此致谢

Answer 1

这似乎是.dataset或data- attribute的完美用例。 MDN有一个很棒的页面，显示了如何使用它。 基本上， <data-uid = "ach782bckhbc23whatever"> uid作为<data-uid = "ach782bckhbc23whatever">在HTML中的<tr>或<button>元素上存储，请使用evt.target.dataset.uid或evt.target.parentElement.dataset.uid获取行的uid，以进行.get() Firebase调用。

 <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div> let el = document.querySelector('#user'); // el.id == 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateOfBirth === '' el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. // 'someDataAttr' in el.dataset === false el.dataset.someDataAttr = 'mydata'; // 'someDataAttr' in el.dataset === true