第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何將firestore中的所有文檔顯示為html

如何將firestore中的所有文檔顯示為html

飲歌長(zhǎng)嘯 2023-10-30 20:05:01
db.collection('Buses').get().then((snapshot) = > {  snapshot.forEach((busDatas) = > {    busData = busDatas.data()    console.log(busData)    document.getElementById('bus-container-dynamic').innerHTML = `<div class="single-room-area d-flex align-items-center   mb-50 wow fadeInUp" data-wow-delay="100ms">  <div class="room-thumbnail">    <img src="${busData.ImageLink}" alt="">  </div>  <div class="room-content">    <h2>${busData.TourName}</h2>    <h6>${busData.From} to ${busData.To}</h6>    <h4>? ${busData.SeatPrice} </h4>    <div class="room-feature">      <h6>Boarding Point  <span>${busData.BoardingTime}</span></h6>      <h6>Dropping Point <span>${busData.DroppingTime}</span></h6>      <h6>Seats Left <span>${busData.SeatsLeft}</span></h6>      <h6>Total Time <span>${busData.TotalTime}</span></h6>    </div>    <a href="#" class="btn view-detail-btn">      View Details       <i class="fa fa-long-arrow-right" aria-hidden="true"></i>    </a>    </div>  </div>`})})我正在使用此代碼在 html 中顯示我的代碼，但網(wǎng)頁(yè)上僅顯示一個(gè)文檔，但是當(dāng)我在控制臺(tái)中打印該數(shù)據(jù)時(shí)，我得到了所有文檔
查看完整描述

1 回答

?
qq_笑_17

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊

不要在每次迭代時(shí)覆蓋元素的內(nèi)容，而是附加到它們。

事實(shí)上，使用一個(gè)變量來(lái)追加，然后將其分配給元素，這樣您只需操作 DOM 一次。

這行：

document.getElementById('bus-container-dynamic').innerHTML = `...`;

在每次迭代中不斷重寫整個(gè)內(nèi)容。#bus-container-dynamic

您可以將所有數(shù)據(jù)存儲(chǔ)在一個(gè)變量中，然后將其分配給元素。

一個(gè)簡(jiǎn)短的片段來(lái)說(shuō)明解決方案。

const myData = [1,2,3,4,5];


// Create a variable here 

let html = '';


myData.forEach( e => {


  // Create your element's HTML inside the loop

  html += e;

  

});


// Then assign it to the element

document.getElementById('my-element').innerHTML = html;

<div id="my-element"></div>

這就是我修改您最初發(fā)布的代碼的方式。


db.collection('Buses').get().then((snapshot) = > {


  let html = '';


  snapshot.forEach((busDatas) = > {


    busData = busDatas.data()


    console.log(busData)


    html += `


<div class="single-room-area d-flex align-items-center 

  mb-50 wow fadeInUp" data-wow-delay="100ms">


  <div class="room-thumbnail">

    <img src="${busData.ImageLink}" alt="">

  </div>


  <div class="room-content">


    <h2>${busData.TourName}</h2>

    <h6>${busData.From} to ${busData.To}</h6>

    <h4>? ${busData.SeatPrice} </h4>


    <div class="room-feature">

      <h6>Boarding Point  <span>${busData.BoardingTime}</span></h6>

      <h6>Dropping Point <span>${busData.DroppingTime}</span></h6>

      <h6>Seats Left <span>${busData.SeatsLeft}</span></h6>

      <h6>Total Time <span>${busData.TotalTime}</span></h6>

    </div>


    <a href="#" class="btn view-detail-btn">

      View Details 

      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>

    </a>


  </div>


</div>`


  document.getElementById('bus-container-dynamic').innerHTML = html;


  })    // End foreach

})      // End then


查看完整回答
反對(duì) 回復(fù) 2023-10-30
  • 1 回答
  • 0 關(guān)注
  • 111 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)