array value is not displaying

I have a function to helps display image thumbnails I initially call out the variables in this format

(function(){
var catalog = {

thumbnails: [
  'https://farm6.staticflickr.com/5576/18670011368_b25a92d37e_k.jpg',
  'https://unsplash.imgix.net/photo-1428930377079-45a584b6dd6b?fit=crop&fm=jpg&q=75&w=1050',
  'https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=700&q=75&w=1050',
  'https://ununsplash.imgix.net/photo-1422207134147-65fb81f59e38?fit=crop&fm=jpg&h=800&q=75&w=1050',
]
.
.
.
catalog.init();

I need to replace the thumbnails with imageUrls from firebase so I created an empty array and a function that get a snapshot value for some variables and imageurls

var thumbnails = [];

function showproductpage(element){


var itemdetailref = Cataloguedatabase.ref('/Listings/'+ listingID);

return itemdetailref.once('value').then(function(snapshot){
    var results=snapshot.val();
 var mainimage = results.ProductImageUrl;
 var thumbnail1 = results.ProductImage1Url;
 var thumbnail2 = results.ProductImage2Url;

  thumbnails.push(mainimage,thumbnail1,thumbnail2);

}

so my updated thumbnail function looks like this

(function(){
var catalog = {

thumbnails ,
....

catalog.init();
})()

but when I run this no image comes out for thumbnails and no error displayed on console. What am I doing wrong and how can I fix this?

1 answer

  • answered 2017-10-11 10:23 Qklanski

    Self invoking function is called before your images will be loaded. Try to replace images also in self-invoking function.