如何从Firebase数据库中检索数据数组并使用结果填充HTML页面？

Question

我正在尝试从Firebase数据库生成一组数据,并使用结果填充HTML页面.

这是我的数据库的布局:

MYAPP
    |_______chat
    |
    |_______users
                |_____2eD8O9j2w
                |             |____email
                |             |____first_name
                |             |____last_name
                |
                |_____7d73HR6d
                |_____9ud973D6
                |_____Kndu38d4

我希望能够获取内部所有"email"和"first_name"字段的数组users,然后根据此数据自动创建和填充HTML列表.(有点像创建联系人列表,其中将有每行两个div: <td><div>first_name</div><div>email</div></td>)

这是我当前尝试使用数据填充HTML页面:

HTML

(是否可以在Javascript中自动创建和填充这些行,而不是在HTML代码中创建空行？)

<div>
    <section>
        <table>
            <tr>
            <td></td>
            </tr>
            <tr>
            <td></td>
            </tr>
            <tr>
            <td></td>
            </tr>
            <tr>
            <td></td>
            </tr>
            <tr>
            <td></td>
            </tr>
        </table>
    </section>  
</div>

使用Javascript

function createContactList(){
    var elements = document.getElementsByTagName('td');
    var contacts = [];

    // Get a database reference to the users section
    var ref = firebase.database().ref().child('/users');
    ref.on("value", function(element) {
        return function (snapshot) {
            console.log(snapshot.val());    

            // Loop through each HTML tag
            for(var i = 0; i < elements.length; i++){

                element.innerHTML = snapshot.val();
                var tester = snapshot.val();

                console.log(tester.email); // This returns "undefined"
                console.log(snapshot.val()); // This returns a list of User IDs
                console.log(snapshot.val().email); // This returns "undefined"
                console.log(snapshot.val(email)); // This shows the error: ``firebase Uncaught ReferenceError: email is not defined``

                var createarraytest = snapshot.email;
                contacts.push({email: createarraytest});    
            }
        }(elements[i]),
        function (errorObject) {  // Deal with errors
        console.log("The read failed: " + errorObject.code);
        });
    }
              console.log(contacts);
}

当我运行此功能时,HTML页面上会显示以下列表:

[OBJECT OBJECT]
[OBJECT OBJECT]
[OBJECT OBJECT]
[OBJECT OBJECT]
[OBJECT OBJECT]

console.log(snapshot.val());显示随机用户ID的列表.在试图访问email和first_name数据为每个我试过以下ID:

var tester = snapshot.val();
console.log(tester.email); // This returns "undefined"

console.log(snapshot.val().email); // This returns "undefined"
console.log(snapshot.val(email));  // This shows the error: ``firebase Uncaught ReferenceError: email is not defined``

我习惯在Javascript中使用带有SQL数据库的数组,但我不知道如何访问Firebase在这个noSQL数据库中创建的随机用户ID字符串中包含的数据.

我已经尝试过关注文档和这里发布的答案:在Firebase中存储值数组的正确方法但我到目前为止还无法使其工作.

任何有助于此工作的帮助将非常感谢,提前谢谢!

Answer 1

你的问题有点宽泛,所以我不确定你问的是哪个部分.但是,检索数据并循环遍历它的方式肯定会导致问题.

要检索数据,请使用value事件,该事件返回包含所有请求的子节点集合的快照.要遍历这些孩子,请使用snapshot.forEach():

var table = document.getElementsByTagName('table')[0];
ref.on("value", function(element) {
  snapshot.forEach(function(child) {
    console.log(child.key+': '+child.val());
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerText = child.val().email + " --- " + JSON.stringify(child.val());
    tr.appendChild(td);
    table.appendChild(tr);
  });
});

我建议child_added改为监听事件,因为它简化了代码并使以后更容易响应其他事件(例如child_deleted):

var table = document.getElementsByTagName('table')[0];
ref.on("child_added", function(child) {
  console.log(child.key+': '+child.val());
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.innerText = child.val().email + " --- " + JSON.stringify(child.val());
  tr.appendChild(td);
  table.appendChild(tr);
});

通过阅读您的问题,我得到的印象是您正在尝试同时学习Firebase和Web开发.这是一个强大而强大的技术组合,可以让你构建一些很棒的应用程序.但同时接受这两个意味着你的问题往往缺乏一些重点.目前还不清楚您是否遇到了Firebase部件或HTML部件.

我强烈建议您使用Firebase Codelab for web,它可以构建一个聊天应用程序并为您提供HTML文件.或者首先建立一个没有Firebase的网络聊天应用.是的,它将是无聊的,只是操纵本地数据数组.但它会带来更多关注的问题,这使我们更容易为您提供帮助.然后,一旦掌握了Web方面的内容,就可以添加Firebase以实现实时数据的良好性.