异步访问 Firebase 中的数组

这是我的代码：

var userRef = new Firebase("https://awesome.firebaseio.com/users/");

var tokenRef = userRef.child(key+'/tokens');
tokenRef.once('value', function(snapshot){

  var userTokenSync = $firebase(tokenRef);
  var userTokens = userTokenSync.$asArray();


  console.log(userTokens);
  console.log(userTokens[0]);
        
  for(var i=0, len = userTokens.length; i < len; i++) {
     console.log(userTokens[i]);
  }
  console.log('done');
})

这段代码从 firebase 获取用户的令牌，我只想浏览令牌数组。

这是控制台给我的内容：

如您所见，我无法访问该数组。你知道我该怎么做吗？

提前致谢。

欢迎来到异步加载101。

  var userTokens = userTokenSync.$asArray();

  console.log(userTokens);
  console.log(userTokens[0]);

  for(var i=0, len = userTokens.length; i < len; i++) {
     console.log(userTokens[i]);
  }
  console.log('done');

该片段的第一行starts从 Firebase 加载您的数据。但加载可能需要一些时间。由于浏览器不想阻止某些事情，因此它会继续执行脚本。

当浏览器执行你的console.log(userTokens);数据很可能尚未加载。所以它只是将对象作为占位符打印到控制台。

当它到达for循环中，数据可能已从 Firebase 加载，也可能尚未加载。

在某个时刻，您单击了已记录的旁边的箭头userTokens。此时数据已从 Firebase 加载，并且控制台显示最新数据。

该解决方案由 AngularFire 以承诺的形式提供。 AngularFire 承诺在未来的某个时候为您提供数据。如果您有一段代码只应在加载数据时执行，您可以这样编写：

  var userTokens = userTokenSync.$asArray();

  console.log(userTokens);
  console.log(userTokens[0]);

  userTokens.$loaded(function(userTokens) {
    for(var i=0, len = userTokens.length; i < len; i++) {
      console.log(userTokens[i]);
    }
    console.log('done');
  });

  console.log('at last line, but not done yet');

Update

请注意，上面是何时使用的一个不好的例子$loaded. Since $loaded只会触发一次，它只会记录initial数组的内容。如果您只是想查看数据是否/何时加载，惯用的方法是添加userTokens范围：

$scope.userTokens = userTokens;

并将其添加到您的视图/HTML 中：

<pre>{{ userTokens | json }}</pre>

AngularFire 现在将监控何时以任何方式加载或修改 userTokens，并在发生这种情况时告诉 AngularJS 更新视图。

另请参阅这些：

• Firebase、AngularJS 和 GeoFire - 等待工厂的响应 https://stackoverflow.com/questions/26897841/firebase-angularjs-and-geofire-wait-for-response-from-factory/26911173#26911173
• Firebase angularfire child.$asObject 给出未定义的属性 https://stackoverflow.com/questions/26604472/firebase-angularfire-child-asobject-give-properties-undefined/26673597#26673597
• angularfire - 为什么我不能循环 $asArray 返回的数组？ https://stackoverflow.com/questions/26395912/angularfire-why-cant-i-loop-over-array-returned-by-asarray/26403301#26403301
• 将父作用域中的变量传递给回调函数 https://stackoverflow.com/questions/26297654/passing-variable-in-parent-scope-to-callback-function/26299662#26299662
• 尝试从 Firebase 获取子记录 https://stackoverflow.com/questions/26268446/trying-to-get-child-records-from-firebase/26277382#26277382

是的...我们经常被问到这个问题。