如何显示从firestore到html的所有文档答案

【问题标题】：How to display all the documents from firestore to html如何显示从firestore到html的所有文档
【发布时间】：2020-04-03 17:34:49
【问题描述】：

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

【问题讨论】：

标签： javascript html google-cloud-firestore

【解决方案1】：

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

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

这一行：

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

在每次迭代时重写#bus-container-dynamic的全部内容。

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

一个简短的 sn-p 来说明解决方案。

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;

&lt;div id="my-element"&gt;&lt;/div&gt;

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

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

【讨论】：