Задание вызывается первым после завершения задания

Question

Я хочу заполнить фрагмент HTML (вы можете увидеть его ниже). Итак, я хочу добиться этого: https://www.dropbox.com/s/941jes7svcyusmf/example.PNG?dl=0 Поэтому я написал этот код js (примечание: я работаю с firebase), чтобы заполнить div и затем заполнить значения:

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

              table_number++;
              console.log("forEachMember" + table_number);

              const html = populateTable("member_name" + table_number, "layout_table" + table_number);
              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);

                });
              });
            })  

А вот функция, в которой я добавляю значения в таблицу:

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

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

      //Zeile erstellen

      console.log("addToTable" + table_name);

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

      //Spalten in einer Zeile

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

      //Spalten in einer Zeile

      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. Таким образом, таблица есть, но она не может ее найти. Поэтому я начал использовать console.log (); Похоже, что задача members.forEach(el => { запускается до конца, а затем сначала запускается задача db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {. И чем переменная table_number равна нулю. Но почему и как это исправить?

EDIT:
@israelss упомянул, что это проблема асинхронной задачи Firebase. Но как это исправить?

Answer 1

Это должно быть примерно так:

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();
            members.forEach(el => {
                console.log(el)

                table_number++;
                console.log("forEachMember" + table_number);

                const html = populateTable("member_name" + table_number, "layout_table" + table_number);
                document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);
                addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);

              })  
        });
      });

Дело в том, что сначала вы должны выполнить наиболее трудоемкую задачу, в данном случае запрос базы данных, а затем сделать все остальное. Поскольку Javascript является асинхронным, это означает, что он не будет ждать завершения одной инструкции, прежде чем перейти к следующей, он будет пытаться выполнить все их одновременно, если вы не используете обещания.

Answer 2

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