我尝试从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中,它返回未定义的
添加:#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"
答案 0 :(得分:3)
您的数据是从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,您需要反应性思考:每当我获得数据时,我都会使用它。
假设您要为每个事件添加一个元素,并更新平均事件持续时间。您可以通过以下方式执行此操作:
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);
});
答案 1 :(得分:0)
尝试:
console.log(JSON.stringify(events[0]));
取决于您的数据,您也可以尝试JSON.parse来管理元素。 它应该有所帮助。