使用Javascript从Firebase数据库显示数据 [英] Display Data from firebase Database using Javascript

问题描述

我有一个表，该表有四个列ID，NAME，SURNAME和RECIPIENT

I have a a table that has four columns ID,NAME,SURNAME and RECIPIENT

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

Each button has a different value that is equal to the number of the ID that is in the same line as the button. For example the value of the first button is 2, second button 3 last button 123 all the buttons have id=contact. Each time i press a button i store the value of that button in a variable with the name input. My source code for that is:

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数据库中，我有一个带有名称文件的文件夹，该文件具有三个辅助文件夹，它们与我具有

Then i want to user this variable to fetch some files that are corresponded with the current varibale from firebase database. In my firebase database i have a folder with the name files that has three supfolders that coresponds to the values of the three buttons that i have

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

In general lines I click one of the three buttons (let's say the button in the first column), I store the value of the button(so now the input value will be equal to 2). Then i drug all the information that is stored in firebase database from files/2/. I have implemented the source code for that but I am not getting any results and when i run inspect console i am not getting any errors. The source code is the following :

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，我得到结果，所以看来问题出在那，但我没有知道还能做什么.

If in the above source code change the line var databaseRef = firebase.database().ref().child(`files/${input}/`); replacing the variable i stored the value of the button in the first function with 2 , 3 or 123 i am getting results so it seems the the problem is there but i dont know what else to do.

有人可以帮助我吗? 致谢

Can someone please help me ? Thanks in Regards

推荐答案

对于.dataset或data-属性，这似乎是一个完美的用例. MDN 上有一个很棒的页面，显示了如何使用此功能.基本上，将uid以<data-uid = "ach782bckhbc23whatever">的形式存储在HTML中的<tr>或<button>元素上，然后单击，使用evt.target.dataset.uid或evt.target.parentElement.dataset.uid获取该行的uid，以进行.get() firebase调用. /p>

This appears to be a perfect use case for the .dataset or data- attribute. MDN has a great page showing how to use this. Basically, store the uid as <data-uid = "ach782bckhbc23whatever"> in your HTML on the <tr> or the <button> element an on click, use evt.target.dataset.uid or evt.target.parentElement.dataset.uid to get the row's uid to make your .get() firebase call.

<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

这篇关于使用Javascript从Firebase数据库显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！