Как показать / отобразить полученные данные из базы данных, используя снимок / querysnapshot на моей странице html?

Question

Я попробовал .innerhtml способ, но не знаю, почему на нем ничего не отображается, только пустая страница.

Когда я использую snapshot вместо querysnapshot, он работает, но показывает другое (последнее c введено) вместо искомого.

Код функции

function renderHTML(doc){
  // TODO: do something with the data 

  // To create elements (such as list or span) 
  var plano = document.createElement('span');
  plano.innerHTML = doc.data().plate;
  // list.appendChild(plano);

  // To append the the list to querySelector
  document.getElementsByClassName(".numPlate").appendChild(plano);
 }
function ser(){
  n=0;
  var num = document.getElementById("plateNo").value;
  if(num == ""){
    var ent = document.getElementById("plateNo");
    ent.classList.add("invalid");
    document.getElementById("err").setAttribute("data-error", "Wrong");
  }
  else{
    for(i=0;i<2;i++){
        var ans = num.localeCompare(plates[i]); 
        if(ans==0){
          db.collection("details").where('plate', '==', num).get()
            .then(snapshot => {
               if (snapshot.empty) {
                 console.log('No matching documents.');
               return;
                }  
            snapshot.forEach(doc => {
                console.log(doc.id, '=>', doc.data());
          renderHTML(doc);
          });
        })
           .catch(err => {
           console.log('Error getting documents', err);
        });
           n=1;
           window.open("/pages/detail.html","_self");
           break;
        }}
        if(n==0) {
          var element = document.getElementById("plateNo");
          element.classList.add("invalid");
          document.getElementById("err").setAttribute("data-error", "Invalid Entry");
        }
  }}

HTML Код для ввода Страница

<form id="platef" action="/" method="get" target="_self" name="serf" class="col s12 l12">
            <div class="row">
              <div class="input-field col s7 l3 offset-s2 offset-l4 asd">
                <i class="material-icons prefix" id="ic" style="top: 12px;" onclick="ser()" required>search</i>
                <input id="plateNo" class="validate" type="text" name="no" style="text-transform:uppercase" onsubmit="ser()" required>
                <label for="plateNo">Number plate</label>
                <span class="helper-text" data-error="Invalid Entry" id="err"></span>
              </div>
            </div>
          </form>

HTML КОД страницы отображения

<div id="details" class="details container">
<div class="row">
      <div class="col s6 offset-s3 l6 offset-l3">
    <div class="head card-panel">
      <div class="header center-align"><h5 class="numPlate">Database Data</h5></div>
    </div></div></div></div></div>
</div>

Обновление

Я получаю данные из базы данных и показываю их вверх в console.log, но его нет на веб-странице. Для проектирования я использую Materialise css.

У меня есть две страницы, с одной я ввожу число для поиска в базе данных и затем отображаю его на другой странице, если оно действительно.

Answer 1

Чтобы отобразить некоторые данные Cloud Firestore в HTML:

// To select the element class details
const dat = document.querySelector(".details");


function renderHTML(doc){
 // TODO: do something with the data 

 // To create elements (such as list or span) 
 let list = document.createElement('li');
 let name = document.createElement('span');

 // To set attributes to elements 
 list.setAttribute('id', doc.id);
 name.textContent = doc.data().name;

 // To append element to the list 
 list.appendChild(name);

 // To append the the list to querySelector
 dat.appendChild(list);
}


db.collection("details").where('plate', '==', num).get()
  .then(snapshot => {
    if (snapshot.empty) {
      console.log('No matching documents.');
      return;
    }  
    snapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
      renderHTML(doc);
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });

Дополнительную информацию можно найти в документации