javascript - 如何将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