firebase forEach循环完成后,先执行下一个任务

时间:2019-01-24 13:37:43

标签: javascript html asynchronous google-cloud-firestore

我有两个任务。他们必须从Firebase Firestore获取价值。这是我的JavaScript:

if (doc.exists) {
            console.log("Document data:", doc.data());
            const data = doc.data();
            const members = data.members;
            var permission_table = document.getElementById("noten_tabelle_permission");
            var permission_table_container = document.getElementById("main_padding");

            members.forEach(el => {
              console.log(el)

              table_number++;

              const html = fillTemplate("grade_table" + table_number, doc.id);
              // Join the array of html and add it as the `innerHTML` of `main`
              document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);

              db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                    console.log(doc.id, " => ", doc.data());
                    const data = doc.data();

                    addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);

                });
              });
            })

          } else {
            console.log("No such document!");
          }

因此,首先您可以看到我正在从Firestore获取“成员”。然后,我为每个表创建一个具有不同ID的表。顺便说说。这是“ fillTemplate”函数:

function fillTemplate({ table_name, id }) {
  return `
  <div class="noten_tabelle_permission" id="noten_tabelle_permission">
    <h1 id="member_name">${id}</h1>
    <table id="${table_name}" style="width:100%">
      <tr>
        <th>Fach</th>
        <th>mündlich</th>
        <th>Klausur</th>
      </tr>
      <!-- Make content with js code -->
    </table>
  </div>
  `;
}  

因此,在将表连接到主视图之后,我正在搜索每个用户(===或每个表)的值。我通过调用“ addToTable”函数将它们添加到表中,您可以在此处看到:

function addToTable(table_name, subject, mdl, klu) {

  var subject_name = getSubjectByNumber(subject);
  var short_subject = getSubjectShortByNumber(subject);

      var y = document.createElement([short_subject]);
      y.setAttribute("id", [short_subject]);
      document.getElementById([table_name]).appendChild(y);

      var y = document.createElement("TR");
      y.setAttribute("id", [short_subject]);

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById(table_name).appendChild(y);
}  

但是现在我在行Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null中遇到此错误:document.getElementById([table_name]).appendChild(y);。我认为这是因为Firebase是异步的。但是如何解决呢?如何编码以严格获取该成员的值并首先从下一个成员开始?


表的ID是字符串“ grade_table”和var table_number的编号。即使第二个Firebase任务也需要该ID。但是,由于第一个Firebase任务是异步加载的,因此var table_number会立即通过以下行更新:table_number ++;。因此,firebase的下一个任务的表ID错误。


〜马塞洛

0 个答案:

没有答案