Btukfyl

I am trying to display data from my firebase database and images from firebase storage. Currently it seems to run some of my code before the other. I have shown my code below:

 <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 is returning the data from the database correctly but it is having issues resolving the URL of the image. From my console logs, the issue seems to be that the code is reaching console.log('url outside of function is: '+urlimage); before it reaches console.log(urlimage); even though it is above it in the code structure. I think it has something to do with how Javascript handles it. I would highly appreciate some help. Thanks in advance.

it looks like "getDownloadURL" returns a Promise and you will get the url when that Promise is resolved so the behaviour you explained is normal. If you want to use the url value you have to move your code inside the callback function. something like this

var getURL = function(childSnapshot) {

   var childKey = childSnapshot.key;

   var childData = childSnapshot.val();

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

       var myHTML = '';

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

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

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



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

       myHTML += '</div>';

       myHTML += '</div>';

       return myHTML;

  });

}

var promises = ;

snapshot.forEach(function(childSnapshot) {

       promises.push(getURL(childSnapshot));

}  

Promise.all(promises).then(results => {

     wrapper.innerHTML = results.join('');

}