在 JavaScript 中将 Firebase 数据存储到数组中答案

【问题标题】：Store Firebase data into array in JavaScript在 JavaScript 中将 Firebase 数据存储到数组中
【发布时间】：2016-08-25 20:57:39
【问题描述】：

我尝试从 Firebase 获取数据并将其存储到数组中。但是，当我尝试从数组中获取数据时，它变得未定义。谁能告诉我为什么会这样？

var events = [];
var databaseRef = database.ref("events").orderByChild("date");

databaseRef.on('child_added', function(snapshot) {
  var event = snapshot.val(); 

  events.push({
    title: event.title, 
    content: event.content
  });
});

console.log(events);
console.log(events[0]);
console.log(events.pop());

在#1 中，所有数据都作为对象存储在数组中。但是在 #2&3 中，它返回 undefined

添加：#1 返回：

[]
    0 : Object
        content : "Rehoncus. Aliquam nibh antegestas id dictum a, commodo. Praesenterto faucibus malesuada faucibu"
        title : "Tivamus at magna non nunc"
    1 : Object
        content : "Rehoncus. Aliquam nibh antegestas id dictum a, commodo. Praesenterto faucibus malesuada faucibu"
        title : "Vivamus at magna non nunc"

【问题讨论】：

events 数组的内容似乎被写入控制台的原因是，在开发者工具控制台中展开数组时，会显示当前数组内容。请注意，[] - 一个空数组 - 是展开前控制台中显示的内容。

标签： javascript arrays firebase firebase-realtime-database

【解决方案1】：

您的数据是从 Firebase 异步加载的。当您的 console.log 语句执行时，数据还没有从 Firebase 服务器返回。通过添加一些额外的日志语句最容易看到这一点：

var events = [];
var databaseRef = database.ref("events").orderByChild("date");

console.log("before attaching listener");
databaseRef.on('child_added', function(snapshot) {
  console.log("in listener callback");
});
console.log("after attaching listener");

日志语句的顺序为：

在附加监听器之前

附加监听器后

在监听回调中

在监听回调中

在监听回调中

这可能不是您所期望的。但在针对基于云的服务（例如 Firebase 数据库）进行编程时，这种情况非常常见。事实上：使用 Firebase 数据库，这是处理数据持续同步的唯一方法。如果明天有人添加新活动，您将获得另一个：

在监听回调中

要处理这种异步加载，您通常必须颠倒您的思维方式。我们处理代码的通常方式是按顺序进行：首先我将加载数据，然后我将对这些数据做一些事情。使用 Firebase，您需要进行反应式思考：每当我获得数据时，我都会对其进行处理。

假设您要为每个事件向 HTML 添加一个元素并更新平均事件持续时间。你可以这样做：

var events = [];
var databaseRef = database.ref("events").orderByChild("date");

databaseRef.on('child_added', function(snapshot) {
  var event = snapshot.val(); 

  // add the event to the UI
  var elm = document.createElement('li');
  elm.id = 'event-'+snapshot.key;
  elm.innerText = event.title;
  document.querySelector('#event-list').appendChild(elm);

  // add the event to our list
  events.push({
    title: event.title, 
    content: event.content
  });

  // update/recalculate our avg event duration
  calculateAverageEventDuration(events);
});

【讨论】：

【解决方案2】：

试试：

console.log(JSON.stringify(events[0]));

根据您的数据，您也可以尝试 JSON.parse 来管理元素。它应该会有所帮助。

【讨论】：