从 Firebase 读取嵌套数据返回的不是数组

Question

尝试读取（并期望）这样的嵌套数组：

var array = [
0: {subArrayy: {...}, title: "Title"}, 
1: {subArray]: {...}, title: "Title"},
...

但是在阅读和（！）输出之后，结果很好。我的 Web 控制台向我显示了数组，一切似乎都很好。但是做 array.length 返回 0。任何迭代都返回 undefined。

我已经尝试使用我之前看到的 ladosh _.toArray 东西，但它完全没有任何作用。

var locations = []; // Empty array

  var ref = db.ref("locations/");
  ref.once("value", function(snapshot) {

    snapshot.forEach(function(item) {
      var itemVal = item.val();
      locations.push(itemVal); // Adding new items seems to work at first

    });

  });
  console.log(locations, locations.length);

输出：

chrome output

我希望它是可迭代的，就像我可以使用 array0 进行导航一样。

Answer 1

Firebase 异步读取数据，因此应用在等待网络流量时不会被阻塞。然后一旦加载数据，它就会调用你的回调函数。

您可以通过放置一些日志语句轻松地看到这一点：

console.log("Before starting to load data");
ref.once("value", function(snapshot) {
  console.log("Got data");
});
console.log("After starting to load data");

当你运行这段代码时，输​​出是：

开始加载数据之前

开始加载数据后

得到数据

这可能不是您期望的顺序，但它准确地解释了为什么您在记录时得到一个零长度数组。但是由于主要代码直接继续，到你console.log(locations, locations.length)的时候数据还没有加载，你还没有把它推到数组中。

---

解决方案是确保所有需要数据中数据的代码要么在回调内部，要么从那里调用。

所以这会起作用：

var locations = []; // Empty array

var ref = db.ref("locations/");
ref.once("value", function(snapshot) {

  snapshot.forEach(function(item) {
    var itemVal = item.val();
    locations.push(itemVal);
  });

  console.log(locations, locations.length);

});

这样：

function loadLocations(callback) {
  var locations = []; // Empty array

  var ref = db.ref("locations/");
  ref.once("value", function(snapshot) {
    snapshot.forEach(function(item) {
      var itemVal = item.val();
      locations.push(itemVal);
    });
    callback(locations);
  });
});

loadLocations(function(locations) {
  console.log(locations.length);
});

最后一个 sn-p 的一个更现代的变体是返回一个承诺，而不是传入一个回调。

function loadLocations() {
  return new Promise(function(resolve, reject) {
    var locations = []; // Empty array

    var ref = db.ref("locations/");
    ref.once("value", function(snapshot) {
      snapshot.forEach(function(item) {
        var itemVal = item.val();
        locations.push(itemVal);
      });
      resolve(locations);
    });
  })
});

然后你可以这样称呼它：

loadLocations().then(function(locations) {
  console.log(locations.length);
});

或者使用现代 JavaScript，您可以使用 async / await 并执行以下操作：

let locations = await loadLocations()
console.log(locations.length);

请记住，最后一个 sn-p 仍然具有相同的异步行为，并且 JavaScript 运行时（或转译器）只是对您隐藏它。

Answer 2

设置睡眠功能约 300 毫秒似乎可以解决问题。我认为这与同步有关，但并不完全确定。我想它只需要一些时间来处理查询并分配所有内容。

Answer 3

在读取函数上使用 await 似乎也有帮助。