FirebaseのデータをJavaScriptの配列に格納する

Question

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" 

Answer 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 Databaseでは、これがデータの連続的な同期を処理する唯一の方法です。誰かが明日新しいイベントを追加した場合、あなたは別のを取得します：

リスナーコールバックで

この非同期ロードに対処するには、通常、思考のあなたの方法を反転する必要があります。私たちがコードを処理する通常の方法は、最初からデータをロードし、そのデータで何かを実行します。 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); 
}); 

Answer 2

試してみてください。あなたのデータの

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

Depedingは、あなたがあまりにもにJSON.parseを試すことができます要素を管理する。 これは役に立ちます。