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;

因此，要解决您的问题，您需要将此行移至回调函数内的 if 语句的 true 部分

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 ...);
    }
});