Tukukkk

I've written code to fill in my table with data from a database. Currently, I'm using a boolean variable that will set to false after all of the corresponding students have been displayed in the table. That way, on the next querying of the database, the table will begin anew.

But my code seems to always hit my else and triggers the .html() option, overwriting every student except the last one.

To confirm that it wasn't an issue with the data, I logged to the console each student matching the query; indeed, all the data is there, but I want to append until the query is complete. Then, on a new query, I want to clear my table for the next set of data.

The function of the following code is for querying with a "last name":

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;

})

Your if-then-else looks like this:

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

You need to understand that the child_added call back function will run for each child it found from the database, and after all of the children have been iterated, then the function execution ends, and then you hit the line:

firstTime = false;

So, to fix your case, you need to move this line to the true part of your if statement, inside the callback function

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

    }

});