使用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