将Firebase数据存储到JavaScript中的阵列中

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

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"

来源

2016-08-25 lawchihon

之所以阵列似乎写入控制台事件的内容是因为当一个数组中的开发者工具控制台展开，显示当前数组内容。请注意，'[]' - 一个空阵列 - 在展开之前就是控制台中显示的内容。 – cartant

您的数据是从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); 
});

来源

2016-08-25 21:44:40

尝试：

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

Depeding你的数据，你可以尝试JSON.parse太管理元素。它应该有所帮助。

来源

2016-08-25 21:01:39

我刚试过，他们都没有工作 – lawchihon

将Firebase数据存储到JavaScript中的阵列中

回答

相关问题