javascript - 如何从 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 的列表。试图访问 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 字符串中包含的数据。

我已经尝试按照文档和此处发布的答案进行操作:Proper way to store values array-like in Firebase但到目前为止，我一直无法让它工作。

如果您能帮助我们实现这一点，我们将不胜感激，在此先感谢您!

Answer 1

您的问题有点宽泛，所以我不确定您问的是哪一部分。但是您检索数据并循环遍历数据的方式肯定会导致问题。

要检索数据，您可以使用 value 事件，该事件返回包含所有请求的子节点集合的快照。要遍历这些 child ，请使用 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 和网络开发。这是一个伟大而强大的技术组合，可以让你构建一些很棒的应用程序。但是同时考虑两者，意味着您的问题往往缺乏重点。目前还不清楚您是受困于 Firebase 部分还是 HTML 部分。

我强烈建议您参加 Firebase Codelab for web ，它构建了一个聊天应用程序并已经为您提供了 HTML 片段。或者首先在没有 Firebase 的情况下构建网络聊天应用程序。是的，这会很无聊，只是操作本地数据数组。但它会导致更集中的问题，这使我们更容易帮助您。然后，一旦您掌握了网络方面的知识，就可以添加 Firebase 以获得实时数据优势。