异步回调返回 null [英] asynchronous callback returns null

问题描述

我正在尝试分配回调函数值并显示 ng-repeat

I am trying to assign callback function values and display ng-repeat

var myApp = angular.module('mybet',[]);

myApp.controller('MyBetController', function($scope,$firebase,ProfileFactory,MybetFactory){

    $scope.myBetEvents = MybetFactory.getUsersBetsProfile(currentLoggedUser, function(betsData){
        //Callback retuning null value here
        $scope.myBetEvents = betsData;
    });

});

myApp.factory('MybetFactory', ['$firebase', function($firebase){

    var factory = {};

    factory.getUsersBetsProfile = function(userId, callback){

        var firebaseRef = new Firebase("https://xxx.firebaseio.com/usersbetsprofile").child(userId);
        var firebaseBetsRef = new Firebase("https://xxx.firebaseio.com/events");
        var userBettedEvent = [];
        //retrive the data
        firebaseRef.on('value', function (snapshot) {
            console.log(snapshot.val());
            var data = snapshot.val();
            if (data){
                //callback(data);
                angular.forEach(data, function(data){
                    console.log('For Each getUsersBets',data);
                    var firebaseEventsData = firebaseBetsRef.child(data.event_id);
                    //retrive the data of bets
                    firebaseEventsData.on('value', function (snapshot) {    
                        userBettedEvent.push(snapshot.val());
                        console.log('userBettedEvent',userBettedEvent);
                        //if I call callback here then i get the values but calling callback multipul time is no the option 
                }, function (errorObject) {
                    console.log('The read failed: ' + errorObject.code);
                    });
                });
                //ISSUE:: callback returing null values
                        callback(userBettedEvent);
            }else{
                console.log('Users has no bets');
            }
        }, function (errorObject) {
            console.log('The read failed: ' + errorObject.code);
            });
    };

    return factory;
}])

查看::

<ul class="list">
        <li class="item" ng-repeat="events in myBetEvents">{{events.event_name}}</li>
 </ul>

如何让 callback() 返回值并显示在视图中?foreach 返回 null 后是什么导致回调?

How can get callback() to return values and display in view? what is causing callback after foreach returning null?

推荐答案

正如@coder 在评论中已经说过的，你的 callback(userBettedEvent) 是在错误的地方.如果您现在拥有它，它将在之前被调用，on('value' from Firebase 完成.

As @coder already said in the comments, your callback(userBettedEvent) is in the wrong place. Where you have it now, it will be invoked before the on('value' from Firebase has completed.

从评论中很明显您已经注意到这一点，但只希望为一个孩子调用回调.为此，您可以简单地使用 limit.

From the comments it is clear that you've notice that, yet only want the callback to invoked for one child. You can simply use a limit for that.

这样的事情会起作用:

if (data){
    data.limit(1).on('value', function(childData) {
        var firebaseEventsData = firebaseBetsRef.child(childData.event_id);
        firebaseEventsData.on('value', function (snapshot) {    
            userBettedEvent.push(snapshot.val());
            callback(userBettedEvent);
        }
    })

我还没有真正测试过代码，但我很确定 limit 应该能让你朝着正确的方向前进.

I haven't really tested the code, but I'm quite sure a limit should get you in the right direction.

附带说明:您似乎将 Firebase 用作传统数据库，像使用 SQL 一样提取数据.您可能会注意到:这不是 Firebase 的自然模型，它用于同步数据更改.如果你想坚持拉数据，你可以考虑使用 once('value' 而不是 on('value' 来确保处理程序每​​次只触发一次您尝试从 Firebase 中提取数据.

As a side note: you seem to be using Firebase as a traditional database, pulling the data out like you'd do with SQL. As you may notice: that is not a natural model for Firebase, which was made to synchronize data changes. If you want to stick to pulling the data, you may consider using once('value' instead of on('value' to ensure the handlers fire only once for every time you try to pull the data from Firebase.

这篇关于异步回调返回 null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！