Firebase 데이터를 자바 스크립트 배열에 저장하십시오.

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를 시도 할 수 있습니다 요소를 관리하십시오. 도움이됩니다.