如何将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&nbsp;=&nbsp;`...`;在每次迭代中不断重写整个内容。#bus-container-dynamic您可以将所有数据存储在一个变量中，然后将其分配给元素。一个简短的片段来说明解决方案。const myData = [1,2,3,4,5];// Create a variable here&nbsp;let html = '';myData.forEach( e => {&nbsp; // Create your element's HTML inside the loop&nbsp; html += e;&nbsp;&nbsp;});// Then assign it to the elementdocument.getElementById('my-element').innerHTML = html;<div id="my-element"></div>这就是我修改您最初发布的代码的方式。db.collection('Buses').get().then((snapshot) = > {&nbsp; let html = '';&nbsp; snapshot.forEach((busDatas) = > {&nbsp; &nbsp; busData = busDatas.data()&nbsp; &nbsp; console.log(busData)&nbsp; &nbsp; html += `<div class="single-room-area d-flex align-items-center&nbsp;&nbsp; mb-50 wow fadeInUp" data-wow-delay="100ms">&nbsp; <div class="room-thumbnail">&nbsp; &nbsp; <img src="${busData.ImageLink}" alt="">&nbsp; </div>&nbsp; <div class="room-content">&nbsp; &nbsp; <h2>${busData.TourName}</h2>&nbsp; &nbsp; <h6>${busData.From} to ${busData.To}</h6>&nbsp; &nbsp; <h4>₹ ${busData.SeatPrice} </h4>&nbsp; &nbsp; <div class="room-feature">&nbsp; &nbsp; &nbsp; <h6>Boarding Point&nbsp; <span>${busData.BoardingTime}</span></h6>&nbsp; &nbsp; &nbsp; <h6>Dropping Point <span>${busData.DroppingTime}</span></h6>&nbsp; &nbsp; &nbsp; <h6>Seats Left <span>${busData.SeatsLeft}</span></h6>&nbsp; &nbsp; &nbsp; <h6>Total Time <span>${busData.TotalTime}</span></h6>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a href="#" class="btn view-detail-btn">&nbsp; &nbsp; &nbsp; View Details&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-long-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp; </a>&nbsp; </div></div>`&nbsp; document.getElementById('bus-container-dynamic').innerHTML = html;&nbsp; })&nbsp; &nbsp; // End foreach})&nbsp; &nbsp; &nbsp; // End then