CODEWITHSUNDEEP
javascriptasynchronouscallback
Dimitrios Vythoulkas
Dimitrios Vythoulkas

Reputation: 631

callbacks when trying to create an array from asynchronous calls in javascript

I am trying to create an array from an asynchronous get request using a function that uses a for loop in order to pass a parameter in the get request.

var loadRarity = function () {

       var rarities = [];

       for (var i =0; i < deck.length; i++) {

           Card.get({cardName: deck[i].card_name}, function(data) {

               rarities.push(data.data[0].rarity);
               console.log(rarities); //20 instances where the array is being populated

            });   
        console.log(rarities);// result :20x [] empty array
        }
        return rarities;

 };
 var raritiesArray = loadRarity();
 console.log(raritiesArray); //empty array

I can't figure out how to use the callback to make this work.

Upvotes: 0

Views: 72

Answers (2)

RwwL
RwwL

Reputation: 3308

Waiting for all this async stuff to happen, your code that needs to use the result should be in its own callback, which runs when the result is available. For example:

var loadRarity = function(cb) {
  var rarities = [],
      counter = 0,
      done = function(){
        if(counter++ === deck.length - 1){
          cb(rarities);
        }
      };
  for (var i =0; i < deck.length; i++) {
    Card.get({cardName: deck[i].card_name}, function(data) {
      rarities.push(data.data[0].rarity);
      done();
    });   
  }
 };
 loadRarity(function(completedRarities){
   console.log(completedRarities);
 });

Sample (using an image onload fn to simulate your asysnc call): http://codepen.io/RwwL/pen/VeeEBR?editors=001

Upvotes: 0

Fernando Catacora
Fernando Catacora

Reputation: 51

An option is to increment a counter to check if you are on the last callback an then do any needed operation in that last callback

var loadRarity = function () {

       var rarities = [];

       var counter = 0; // initialize counter

       for (var i =0; i < deck.length; i++) {

           Card.get({cardName: deck[i].card_name}, function(data) {

               counter += 1; //increment counter

               rarities.push(data.data[0].rarity);
               console.log(rarities); //20 instances where the array is being populated

               if(counter == deck.length){ //if true you are in the last callback
                 console.log(raritiesArray); // array with all the elements
               }

            });   
        }
        return rarities;

 };
 var raritiesArray = loadRarity();

Upvotes: 1

Related Questions