Question

我尝试从Firebase数据库生成一系列数据，并使用结果填充HTML页面。

这是我的数据库的布局：

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

我希望能够得到所有＆＃34;电子邮件＆＃34;和＆＃34; first_name＆＃34; 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的列表。在尝试访问每个ID的email和first_name数据时，我尝试了以下操作：

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字符串中包含的数据。

我已经尝试过关注文档和此处发布的答案：Proper way to store values array-like in 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的网络聊天应用。是的，它将是无聊的，只是操纵本地数据数组。但它会带来更多关注的问题，这使我们更容易为您提供帮助。然后，一旦掌握了网络方面的内容，就可以添加Firebase以实现实时数据优势。

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

1 个答案: