如何将firestore中的所有文档显示为html

Question

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 中显示我的代码，但网页上仅显示一个文档，但是当我在控制台中打印该数据时，我得到了所有文档

Answer 1

不要在每次迭代时覆盖元素的内容，而是附加到它们。

事实上，使用一个变量来追加，然后将其分配给元素，这样您只需操作 DOM 一次。

这行：

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

在每次迭代中不断重写整个内容。#bus-container-dynamic

您可以将所有数据存储在一个变量中，然后将其分配给元素。

一个简短的片段来说明解决方案。

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>

这就是我修改您最初发布的代码的方式。

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