Javascript - отображение данных таблицы с использованием логического значения для добавления или создания новой таблицы

Question

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

Но мой код, кажется, всегда достигает моего else и запускает опцию .html (), перезаписывая каждого студента, кроме последнего.

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

Функция следующего кода предназначена для запроса с «фамилией»:

var firstTime = true;
$('#querylastName').click(function(){
    var lastNameSelected = $('#userlName').val();
    var ref = firebase.database().ref("students");

    ref.orderByChild('lastName').equalTo(lastNameSelected).on("child_added", function(snapshot){
        console.log(snapshot.val());

        // Variables to hold retrieved data from the database.
        var fname_val = snapshot.val().firstName;
        var lname_val = snapshot.val().lastName;
        var hometown_val = snapshot.val().hometown;
        var ethnicity_val = snapshot.val().race;
        var gender_val = snapshot.val().gender;
        var program_val = snapshot.val().program;
        var school_val = snapshot.val().school;
        var concentration_val = snapshot.val().concentration;
        var gradYear_val = snapshot.val().gradDate;
        var timeToComplete_val = snapshot.val().timeToComplete;
        var afterGrad_val = snapshot.val().afterGrad;
        var explain_val = snapshot.val().elaborate;

        // Append read data into the table.
        if(firstTime){
            $("#table_body").append("<tr><td>" + fname_val + "</td><td>" + lname_val + "</td><td>" + hometown_val + "</td><td>" + ethnicity_val + "</td><td>" + gender_val + "</td><td>" + program_val + "</td><td>" + school_val + "</td><td>" + concentration_val + "</td><td>" + gradYear_val + "</td><td>" + timeToComplete_val + "</td><td>" + afterGrad_val + "</td><td>" + explain_val + "</td></tr>");
        }
        else{
            $("#table_body").html("<tr><td>" + fname_val + "</td><td>" + lname_val + "</td><td>" + hometown_val + "</td><td>" + ethnicity_val + "</td><td>" + gender_val + "</td><td>" + program_val + "</td><td>" + school_val + "</td><td>" + concentration_val + "</td><td>" + gradYear_val + "</td><td>" + timeToComplete_val + "</td><td>" + afterGrad_val + "</td><td>" + explain_val + "</td></tr>");
        }
    })
    firstTime = false;
})

Answer 1

Ваш if-then-else выглядит следующим образом:

ref.orderByChild('lastName').equalTo(lastNameSelected).on("child_added", function(snapshot){
    //
    // irrelevant code reduced
    // 
    //
    if(firstTime){
        $("#table_body").append(... etc ...);
    }
    else{
         $("#table_body").html(... etc ...);
    }
});
firstTime = false;   // this will only be called after iterating through all children

Вы должны понимать, что функция обратного вызова child_added будет запускаться для каждого дочернего элемента, найденного в базе данных, и после того, как все дочерние элементы получатбыла повторена, затем выполнение функции заканчивается, и затем вы нажимаете строку:

firstTime = false;

Итак, чтобы исправить ваш случай, вам нужно переместить эту строку в часть true вашего оператора ifвнутри функции обратного вызова

ref.orderByChild('lastName').equalTo(lastNameSelected).on("child_added", function(snapshot){
    //
    // irrelevant code reduced
    // 
    //
    if(firstTime){
        $("#table_body").append(... etc ...);
        firstTime = false;         // <-----------   move it here
    }
    else{
         $("#table_body").html(... etc ...);
    }
});