Not getting returned array of data from factory

Question

I am making calls to two different firebase locations to get the data, once the data is $loaded, I am creating one object. then push this objects into one array and returning array.

But I am not getting array that is been return from factory

myApp.factory('MybetFactory', ['$firebase', function ($firebase) {
  var factory = {};
  factory.getUsersBetsProfile = function (userId, callback) {

    //1. first call to firebase data
    var firebaseUsersBetsProfileRef = new Firebase("https://x.firebaseio.com/profile").child(userId);
    var userBettedEvent = [];
    var userBetProfile = $firebase(firebaseUsersBetsProfileRef).$asObject();
    //2. once object is loaded call second location and load the data
    userBetProfile.$loaded().then(function () {

      angular.forEach(userBetProfile, function (eachUserBetProfile) {
        if (eachUserBetProfile !== null && eachUserBetProfile.hasOwnProperty('id')) {

          var firebaseEventsResultsRef = new Firebase("https://x.firebaseio.com/result/+id");

          var resultsForProfileBets = $firebase(firebaseEventsResultsRef).$asObject();
          //3. once the data is loaded, push it into object created above
          resultsForProfileBets.$loaded().then(function () {
            console.log('Results for profile bets loaded', resultsForProfileBets);
            eachUserBetProfile.results = resultsForProfileBets;
            //4. push same object in array
            userBettedEvent.push(eachUserBetProfile);
          });
        }
      });
    });
    //Issue: this array is not been return in scope
    return userBettedEvent;
  };

  return factory;
}]);

What isn't working about it? Can you reduce the code so that it's smaller, but still shows your problem? — Frank van Puffelen, Oct 09 '14 at 11:24
@FrankvanPuffelen I have tried to simplified the question, please let me know if you like me to post more info. — DPP, Oct 10 '14 at 00:26
Way better. Jenny's answer is correct: you cannot `return` a value from the function, because the value hasn't come back from the server yet. See my explanation here: http://stackoverflow.com/questions/25697907/javascript-assigning-value-to-variable-from-callback-return-timing/25700838#25700838 Instead you should return the promise `userBetProfile` and bind that to the `$scope`. An example: http://stackoverflow.com/questions/26171816/where-to-put-duplicate-calls-to-firebase-in-angularjs-app/26179545#26179545 — Frank van Puffelen, Oct 10 '14 at 01:42
Also, there is no need to push all the bets into an array here, simply use $asArray instead of $asObject to retrieve a synchronized list. Additionally, you should be using [$extendFactory](https://www.firebase.com/docs/web/libraries/angular/guide.html#section-extending-factories) and the $$added method to fetch your bets, which will run each time a record is added, rather than $loaded() which is essentially a static, one-time call on the first sync of data. It would behoove you to spend a good length [in the guide](https://www.firebase.com/docs/web/libraries/angular/) and save some energy. — Kato, Oct 13 '14 at 17:41

score 2 · Accepted Answer · answered Oct 10 '14 at 01:29

The reason that your array isn't visible on your return userBettedEvent line is because of how callbacks work in JavaScript.

Callbacks, which are things that look like this,

doSomethingCool("stuff", function() {...});

usually run once the function they're passed to completes. While your browser waits for doSomethingCool to finish, it goes on executing the subsequent code.

In other words, if you have code like this:

doSomethingCool("stuff", function() {
    console.log("hello");
});
console.log("goodbye");

you're probably going to see this output:

goodbye
hello

To resolve your issue, you need to understand how callbacks work in JavaScript.

Not getting returned array of data from factory

1 Answers1