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

Question

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

的表

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

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数据库中获取一些与当前varibale相对应的文件。在我的firebase数据库中，我有一个文件夹，其名称文件有三个supfolders，它们对应于我拥有的三个按钮的值

在一般行中，我单击三个按钮中的一个（让我们说第一列中的按钮），我存储按钮的值（所以现在输入值将等于2）。然后我从files / 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}/`);替换变量i存储第一个函数中的按钮值2,3或123我得到的结果所以看起来问题就在那里但是我不知道还能做什么。

有人可以帮帮我吗？ 谢谢你的问候

Answer 1

这似乎是.dataset或data-属性的完美用例。 MDN有一个很棒的页面，展示了如何使用它。基本上，将uid作为<data-uid = "ach782bckhbc23whatever">存储在<tr>或<button>元素的HTML中，然后点击，使用evt.target.dataset.uid或evt.target.parentElement.dataset.uid获取行＆＃ 39;用于进行.get()火力呼叫。

<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