OJLpMqv

index.html

<script src="https://www.gstatic.com/firebasejs/6.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
<div id="root">
  <img id="myimg" src="" alt=""/>
</div>

ojlpmqv.markdown

OJLpMqv

A Pen by sakakendo0321 on CodePen.

License.

script.js

var firebaseConfig = {
  apiKey: "AIzaSyChtimh8bsywIQux7C7bgFCLxliqfODYvQ",
  authDomain: "perform2019-de.firebaseapp.com",
  databaseURL: "https://perform2019-de.firebaseio.com",
  projectId: "perform2019-de",
  storageBucket: "perform2019-de.appspot.com",
  messagingSenderId: "968836446312",
  appId: "1:968836446312:web:828572d822ed2102"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var storage=firebase.storage();
var db=firebase.firestore();



async function downloadImage(imageUrl){
    var storageRef=await storage.refFromURL(imageUrl);
    return storageRef
      .getDownloadURL()
      .then(function(url){return url;})
  
}

async function getImages(images){
  await console.log('images',images);
  if(typeof images === 'undefined'){
    await console.log('image is undefined',images)
    return []
  } 
  await console.log('images',images);
  const images_url=await Promise.all(images.map(image=>{
    return image.get();
  })).then(querySnapshots=>{
    console.log('qs',querySnapshots);
    return Promise.all(querySnapshots.map((querySnapshot)=>{
      return querySnapshot.data();
    }))
  });
  await console.log('image urls',images_url);
  return images_url;  
}

async function getProduct(products){
  const result= await Promise.all(products.map(product => {
    return product.get();
  })).then(querySnapshots=>{
    return Promise.all(querySnapshots.map(querySnapshot=>{
      return querySnapshot.data();
    }));
  });
  //await console.log('products',result);
  return result;
}


async function fetchBooth(){
  state={};
   return await db.collection('booths').get().then(async (querySnapshot)=>{
     return await Promise.all(querySnapshot.docs.map(async (doc)=>{
      //await console.log(`${doc.data()}`,doc.data());
      const booth={}
      await console.log(doc.data().name);
      await booth.name=doc.data().name;
      products=await getProduct(doc.data().products);
      await console.log('products',products);
      await booth.products=products;

      imageUrls= await getImages(doc.data().images);
      await console.log('imageurls',imageUrls);
      //if(typeof imageUrls !== 'undefined'){
      booth.images =await  Promise.all(imageUrls.map(async imageUrl=>{
          const download_url=await downloadImage(imageUrl.downloadUrl); 
          console.log('download url',download_url);
          return download_url
        }));
      /*
      }else{
        return 'no_image.jpg'
      }*/
       await console.log(booth)
      
    }));
  })
}

async function main(){
  const images=await fetchBooth();
  await console.log('fetch booths',images);
}

main();

//document.getElementById('root').innerHTML="<h1>hello world</h1>";