JavaScript variable from Firebase only appears second time function it called

Question

I'm working on a simple website just so I can learn FireBase and Javascript. I ran into a problem for when I want to retrieve a specific photo.

 function load(){
 let ext = null;
    var postRef = firebase.database().ref('posts/' + viewNumber +'/fileType');
    postRef.on('value', function(snapshot) {
    var value = snapshot.val();

  if (value === null) {
    return;
  }

  ext = value;

});
    console.log(viewNumber);
    console.log(ext);
    var storage = firebase.storage();
    var pathReference = storage.ref('posts/'+ viewNumber +'.'+ext);
    pathReference.getDownloadURL().then(function(url) {
    // Or inserted into an <img> element:
      var img = document.getElementById('post');
      img.src = url;
      });

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  };

for some reason, the first time I run the function, ext = null but the second time, it is the correct image type. When I change viewNumber and call load() again, it does the same thing, going back to null then second time to the correct extension. I was thinking I could run the function twice every time but I know tha's not proper. Anyone have any suggestions?

score 1 · Accepted Answer · answered May 31 '18 at 20:23

Try it:

function load() {
  let ext = null;
  var postRef = firebase.database().ref('posts/' + viewNumber + '/fileType');
  postRef.on('value', function (snapshot) {
    var value = snapshot.val();

    if (value === null) {
      return;
    }

    ext = value;
    console.log(viewNumber);
    console.log(ext);
    var storage = firebase.storage();
    var pathReference = storage.ref('posts/' + viewNumber + '.' + ext);
    pathReference.getDownloadURL().then(function (url) {
      // Or inserted into an <img> element:
      var img = document.getElementById('post');
      img.src = url;
    });
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
  });
};

The only place that you can ensure that the data from firebase request exists is inside the callback.

Take a look on this article to understand how js and callbacks works.

JavaScript variable from Firebase only appears second time function it called

1 Answers1