异步访问 Firebase 中的数组

Question

这是我的代码：

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 获取用户的令牌，我只想浏览令牌数组。

这是控制台给我的：

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

提前致谢。

Answer 1

欢迎来到异步加载 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');

此 sn-ps 的第一行开始从 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');

更新

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

$scope.userTokens = userTokens;

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

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

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

另请参阅：

• Firebase, AngularJS and GeoFire - wait for response from factory
• Firebase angularfire child.$asObject give properties undefined
• angularfire - why can't I loop over array returned by $asArray?
• Passing variable in parent scope to callback function
• Trying to get child records from Firebase

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