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

Question

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

这是我的数据库的布局：

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

我希望能够获取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``

我习惯于在 SQL 数据库中使用 Javascript 中的数组，但我不知道如何访问 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 的网络聊天应用。是的，这会很无聊，而且只是操纵本地数据数组。但这会导致更集中的问题，这使我们更容易为您提供帮助。然后，一旦您掌握了 Web 方面的知识，就可以添加 Firebase 以提供实时数据优势。