Question

JS：

function getDataOfBus() {
   var dates = document.getElementById('departure-date').value.toString();
   var fromd = document.getElementById('from-dest').value.toString()
   var tod = document.getElementById('to-dest').value.toString()
   console.log(dates + " -" + fromd + " -" + tod)

   db.collection('Buses').where("DepartureDate", "==", dates).where("To", "==", tod).
   where("From", "==", fromd).get().then((snapshot) => {
      let html = '';
      snapshot.forEach((busDatas) => {
         busData = busDatas.data()
         console.log(busData.id)
         html += `
           <div class="single-room-area d-flex align-items-center mb-50 wow fadeInUp" data-wow-delay="100ms" id="prince">
            <div class="room-thumbnail">
                <img src="${busData.ImageLink}" alt="">
            </div>
            <div class="room-content">
                <h2><a href="javascript:setImage();">${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>
                    <h6>Departure Date <span>${busData.DepartureDate}</span></h6>
                </div>
            </div>
           </div>
         `

         document.getElementById('bus-container-dynamic').innerHTML = html;
      }) // End foreach
   }) // End then

}

function setImage() {

}

我已经执行了上面的代码以显示来自云Firestore的文档。但是我没有得到如何获得用户单击的文档的文档ID并在setImage()函数中使用该文档ID的信息？

Answer 1

通过执行busData = busDatas.data()，您将data()方法返回的对象分配给busData变量，但是该对象不包含文档ID。

您应该使用另一个变量来保存该值，或者将文档ID分配给该busData对象。以下（实现第二个选项）应该可以解决问题：

snapshot.forEach((busDatas) => {

    var busData = busDatas.data()
    busData.docId = busDatas.id
    //...

    <h2><a href="javascript:setImage('${busData.docId}');">${busData.TourName}</h2>
    //...

});

busDatas（带有s）是QueryDocumentSnapshot，您可以使用其id属性。

您还可以使用spread syntax，如下所示：

var busData = { docId: busDatas.id, ...busDatas.data() }

如何获取用户单击的文档的文档ID？

1 个答案: