title: How to make For loop wait for Firebase Database response?
body: <p>I have a function that receives an object array. The array looks like this:</p>
  
  <pre><code>var receivedObjects = [{nuih329hs: 100}, {8suwhd73h: 500}, {2dsd73ud: 50}, {9u238ds: 200}];
  </code></pre>
  
  <p>Each key is an ID, and each value is a number.
  The objects are in a set order and what I want to do is iterate through the objects and define each value as a variable, which I'll then use when creating a html row. </p>
  
  <p>The problem I'm having is, I have to make a call to a Firebase database inside this iteration code, the result is that while a row is successfully being created for each object value, the value entered into each row is always the same (the last/most recent value in the object array), so in the above case the number <code>200</code> is appearing in all four rows.</p>
  
  <p>I think this might be happening because maybe all the iterations are completing before the first Firebase call is even completed, meaning the variable <code>currentValue</code> (which I'm entering into the rows) is set at the last value in the array before the first Firebase call is made.</p>
  
  <p>Note: There is another array (called <code>listOfIds</code>) which contains Firebase IDs, I'm able to successfully use each ID from this array as a variable to use in the Firebase call, <code>var currentID</code> is that variable.</p>
  
  <p>This is the function: </p>
  
  <pre><code>function populateTable(receivedObjects){
  
     var receivedObjectsLength = receivedObjects.length;
     // Note: an object array called listOfIds exists here (containing Firebase IDs to be used for querying Firebase), it's referenced below.
  
     for (var i = 0; i &lt; receivedObjectsLength; i++) {
  
        // listOfIds is an Object array 
        var currentID = Object.keys(listOfIds[i]);
  
        var term = (Object.keys(receivedObjects[i])[0]);
        var currentValue = receivedObjects[i][term];
  
        //The following line is showing the correct ID and Value for each iteration:
        console.log("The current ID is: "+currentID+" and the current value is: "+currentValue);
  
        firebase.database().ref('/users/' + currentID).once('value').then(function(child) {
  
        // This is where the rows are created, ``currentValue`` is used here, but it's appearing as the same value in every row.
  
        // The next line is showing the correct current ID, but it's showing the currentValue as "200" in every row.
        console.log("The current ID is: "+currentID+" and the current value is: "+currentValue);
  
      });
    }
  }
  </code></pre>
  
  <p>I'm very confused, because I thought the Javascript iteration code would wait until the data gets returned from the Firebase call, but it seems this isn't the case? How can I change my code so that the line <code>console.log("The current ID is: "+currentID+" and the current value is: "+currentValue);</code> inside the Firebase call success function will show the correct <code>currentValue</code>?</p>