javascript Firebase数据库获取分组的值答案

【问题标题】：javascript Firebase database get values groupedjavascript Firebase数据库获取分组的值
【发布时间】：2017-03-06 00:05:45
【问题描述】：

我连续需要这些值，但如果它们已经在 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);
}

【问题讨论】：

标签： javascript web firebase firebase-realtime-database

【解决方案1】：

数据是从 Firebase 异步加载的。这意味着当您遍历数组时，它还没有被填充。通过用一些日志语句替换大部分代码最容易看到这一点：

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

如果你运行这个 sn-p，日志将会是：

查询前

查询后

在 child_add 中

这可能不是您期望的顺序，因为它与日志语句在您的代码中的顺序不同。这是因为数据是从 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 函数。他们还没有运行它。我们只是将该函数 in 传递给查询，这样查询就可以在获取数据时调用onChildAdded。

这是使用远程服务器进行 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);

现在所有需要新数据的代码都在内部回调中，所以它只在快照实际可用时运行。

【讨论】：