將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中的陣列中

回答

相關問題