Как получить идентификатор документа, на который пользователь нажимает?

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() {

}   

Я выполнил приведенный выше код для отображения документов из облачного хранилища пожаров. Но я не понимаю, как получить идентификатор этого документа, на котором пользователь щелкает, и использовать этот идентификатор документа в функции setImage()?

Answer 1

Делая busData = busDatas.data(), вы присваиваете объект, возвращенный методом data(), переменной busData, но этот объект не содержит do c 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 свойство.

---

Вы также можете использовать синтаксис , как указано ниже:

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