Btukfyl

I am trying to get this piece of code to work and it seems to be running out of order. I noticed this in the console logs.

<script>

            var wrapper = document.getElementById("myHTMLWrapper");

            var myHTML = '';

            var databaseRef = firebase.database().ref('items/');

            databaseRef.once('value', function(snapshot)

            {

              snapshot.forEach(function(childSnapshot) 

              {

                var childKey = childSnapshot.key;

                var childData = childSnapshot.val();

                myHTML += '<div class="card">';

                myHTML += '<div class="card-body">';

                var urlimage = '';

                storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){

                    urlimage = url;

                    console.log(urlimage);

                });

                console.log('url outside of function is: '+urlimage);

                myHTML += '<img src="'+ urlimage +'" class="img-thumbnail" height="">';

                console.log('images/'+ childData.id +'.jpg');

                myHTML += '<h4>'+ childData.sku + ' - ' + childData.name +'</h4>';

                myHTML += '</div>';

                myHTML += '</div>';

              });

              wrapper.innerHTML = myHTML;

            });

          </script>

It seems that the code is running console.log('url outside of function is: '+urlimage); before it runs console.log(urlimage);

I am not too familiar with Javascript yet and I hope I can get some help with this one.

Thanks!!!

storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){

                urlimage = url;

                console.log(urlimage);

            });

The piece of code above from the code you provided actually uses Promises. You usually use promises when dealing with asynchronous data, for example, data from a server. While that piece of code is processing, other lines of code are being executed, thereby leading to what you are observing. The behavior of asynchronous code cannot be usually predicted.

To use urlimage you can do something like this.

storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){

myHTML += '<img src="'+ url +'" class="img-thumbnail" height="">';

        });

You have asynchronous code here. Looks like getDownloadURL() is a promise. I don't know what that function do (google says it is from firebase), but it comes from external library. And it can take some time to execute.

Even if it takes few milliseconds. It is always moved at the end of event loop.

getDownloadURL().then(...) looks like an asynchronous function to me. Asynchronous (async for short) means that the javascript makes an external request (e.g. download a file) and then executes a callback function (the argument to then) once the external request is complete. In general you should expect javascript async callbacks to execute after the entire function call stack that starts the request.

Most programming languages with asynchronous functions will have a facility to wait, which is often called "blocking", but Javascript is an exception.

The reason Javascript does not permit blocking is Javascript engines are single threaded, so blocking on an operation blocks the whole system.

So for a long time, couldn't block a function to wait for the async calls to finish and pick up as if they were ordinary synchronous calls.

This is so inconvenient, Javascript eventually introduced async functions and the await keyword, which does what you want.

async function buildHtml(snapshot) {

   // Note the novel for-loop syntax. The inner function in forEach would break async.

   for(childSnapshot of snapshot) {

      var childKey = childSnapshot.key;

      var childData = childSnapshot.val();

      myHTML += '<div class="card">';

      myHTML += '<div class="card-body">';

      var urlimage = await storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL(); // global state may change here

      myHTML += '<img src="'+ urlimage +'" class="img-thumbnail" height="">';

      myHTML += '<h4>'+ childData.sku + ' - ' + childData.name +'</h4>';

      myHTML += '</div>';

      myHTML += '</div>';

   }

   wrapper.innerHTML = myHTML;

}