使用JavaScript将Firebase数据存储到数组中

时间:2016-08-25 20:57:39

标签: javascript arrays firebase firebase-realtime-database

我尝试从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"

2 个答案:

答案 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来管理元素。 它应该有所帮助。