javascript firebase數據庫獲取值分組

我需要在連續的這些值，但我不希望他們答覆，如果它已經在div。javascript firebase數據庫獲取值分組

我的嘗試就在這裏。我嘗試構建一個數組並將這些值從firebase放到這裏，但仍然無法在html中看到。

var fruits = []; 
    var fetchPostsleft = function(postsRef, sectionElement,fruits) { 
    postsRef .orderByChild('timeStamp').on('child_added', function(data) { 
     console.log(data.val()); 
     var author = data.val().senderName; 


     var containerElement2 = sectionElement.getElementsByClassName('posts-containerleft')[0]; 

     fruits.push(data.val().senderName); 
     console.log(fruits.length); 


    }); 

    }; 


    fetchPostsleft(topUserPostsRef, topUserPostsSectionleft,fruits); 
var fLen = fruits.length; 
     console.log(fruits.length); 

for (var i = 0; i < fLen; i++) { 
    // text += "<li>" + fruits[i] + "</li>"; 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore(createheaders(fruits[i], ""), 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].firstChild); 
}

來源

2017-03-05 xllllll

數據是從Firebase異步加載的。這意味着，當你在數組上循環時，它還沒有被填充。這是最簡單的用幾個日誌報表取代了大部分的代碼，看到這一點：

console.log("Before query"); 
postsRef.orderByChild('timeStamp').on('child_added', function(data) { 
    console.log("In child_added"); 
}); 
console.log("After query");

如果運行這個片段中，記錄將是：

查詢

之前

查詢
後
在child_added

這是概率根本不是你期望的順序，因爲它與日誌語句在代碼中的順序不同。這是因爲數據是從Firebase異步加載的，其餘代碼在加載時會繼續。

它看到，如果你把回調到一個單獨的功能稍微容易：

function onChildAdded(data) { 
    console.log("In child_added"); 
}); 

console.log("Before query"); 
postsRef.orderByChild('timeStamp').on('child_added', onChildAdded); 
console.log("After query");

現在你可以更容易地看到第幾行只是聲明的onChildAdded功能。他們還沒有運行它。我們只是將該函數的傳遞給查詢，以便查詢每當它獲取數據時都可以調用onChildAdded。

這是遠程服務器網頁編程中最常見的陷阱。但是由於大多數現代網絡都基於這種異步API，您將不得不學習它。

我發現這些作品的一種方法是重構您的問題。您當前的代碼基於「首先獲取帖子，然後將其添加到HTML」。但在異步編程中，最好考慮「開始提取帖子，當我們得到它們時，將它們添加到HTML」。這轉化爲下面的代碼：

需要新的數據

function fetchPostsleft(postsRef, sectionElement) { 
    postsRef.orderByChild('timeStamp').on('child_added', function(data) { 
    var author = data.val().senderName; 
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore(createheaders(author, ""), 
    }); 
}; 

fetchPostsleft(topUserPostsRef, topUserPostsSectionleft);

現在所有的代碼是內回調，所以當快照實際可用它只能運行。

來源

2017-03-05 16:05:45

javascript firebase數據庫獲取值分組

回答

相關問題