javascript - 无法将 Firebase 快照数据检索到 Javascript 数组中

Question

我正在尝试从数据库中检索数据。我的代码创建一个空数组，并在每次添加一个子数组时向其中追加一个子数组。然后它创建列表(忽略 MDL 类)并将其添加到 HTML 文档中。

<script>
    // get emergencies to array
    var firebaseRef = firebase.database().ref('Incidents');
    var emergencies = [];
    // var emergencies = ['Test', 'Test 2', 'Test 3'];

    firebaseRef.on('child_added', function(snap) {
        snap.forEach(function (childSnap) {
            console.log(childSnap.val());
            emergencies.push(childSnap.val());
        });
    });

    var opentag = '<ul class="mdl-list" id="emergenciesList">',
    closetag = '</ul>',
    array = [];

    for (i = 1; i <= emergencies.length; i++) {
        array[i] = '<li class="mdl-list__item">' + emergencies[i] + '</li>';
    }

    var newArray = array.join(" ");

    document.getElementById('foo').innerHTML = opentag + newArray + closetag;
</script>

奇怪的是，在 console.log() 语句中，数据检索得很好，但在字符串操作之后，newArray 是未定义的。救命!

Answer 1

该问题是由您订购代码的方式引起的。这些行的执行顺序不是您想象的那样。如果将其简化为这样，最容易看到这一点:

var firebaseRef = firebase.database().ref('Incidents');

console.log("Before database loading started");
firebaseRef.on('child_added', function(snap) {
  console.log("In child_added");
});
console.log("After database loading started");

现在写入日志的顺序是:

Before database loading started

After database loading started

In child_added

这可能不是您所期望的。日志记录按此顺序显示的原因是 Firebase 异步加载数据。因此，当 on('child_added' 行开始加载数据时，可能需要一些时间才能从 Firebase 服务器获取该数据。而不是等待数据(这会阻止您的用户与您的应用交互的能力)，浏览器会继续执行阻止后的语句。然后，当数据可用时，它会调用您的回调函数。

处理异步性的常见方法是重新构建问题。现在您的代码编写为“首先加载数据，然后将其添加到 HTML”。尝试将其框架为“开始加载数据。当数据可用时，将其添加到 HTML”。翻译成这段代码:

var firebaseRef = firebase.database().ref('Incidents');

firebaseRef.on('child_added', function(snapshot) {
    var ul = document.getElementById("emergenciesList");
    if (!ul) {
        document.getElementById('foo').innerHTML = '<ul class="mdl-list" id="emergenciesList"></ul>';
        ul = document.getElementById("emergenciesList");
    }
    var li = document.createElement("li");
    li.classList.append("mdl-list__item"); // or: li.className = "mdl-list__item"
    li.id = snapshot.key;
    li.innerText = snapshot.val();
    ul.appendChild(li);
});

我删除了快照上的循环，因为我不确定是否需要它并且它使代码变得复杂。如果您的数据结构需要循环，您可以将其添加回原来的位置。