javascript Firebase数据库获取分组的值

我需要这些值排成一行，但如果已经在div中，我不希望它们回复

我的尝试在这里。我试图构建一个数组，并将这些值从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);
} 

var-fruits=[]；
var fetchPostsleft=函数（postsRef，sectionElement，fruits）{
postsRef.orderByChild（'timeStamp'）。on（'child_added'，函数（数据）{
console.log（data.val（））；
var author=data.val（）.senderName；
var containerElement2=sectionElement.getElementsByClassName（'posts-containerleft'）[0]；
push（data.val（）.senderName）；
控制台。日志（水果。长度）；
});
};
fetchPostsleft（topUserPostsRef、topUserPostsSectionleft、fruits）；
var fLen=果实长度；
控制台。日志（水果。长度）；
对于（变量i=0；i”+水果[i]+“”；
topUserPostsSectionleft.getElementsByClassName（'posts-containerleft'）[0].insertBefore（createheaders（水果[i]，“”）），
topUserPostsSectionleft.getElementsByClassName（'posts-containerleft'）[0].firstChild）；
} 

数据从Firebase异步加载。这意味着当您在阵列上循环时，它还没有被填充。用几个日志语句替换大部分代码最容易看出这一点：

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

如果运行此代码段，日志记录将为：

询问前

询问后

在child_中添加

这可能不是您期望的顺序，因为它与日志语句在代码中的顺序不同。这是因为数据是从Firebase异步加载的，其余代码在加载时继续

如果将回调函数转换为单独的函数，则更容易看到：

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

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

现在您可以更容易地看到，前几行只声明了

onchildaded

函数。他们还没有运行它。我们只是将该函数传递给查询，以便查询在获得数据时可以调用

onchildaded

这是使用远程服务器进行web编程最常见的陷阱。但是，由于大多数现代web都是基于这种异步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);

现在，所有需要新数据的代码都在回调中，因此只有当快照实际可用时才会运行回调