Данные дублируются с помощью onSnapshot

Question

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

HTML для модальных кнопок

<div class="modal-footer">

    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button id="submitStudent" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>

Javascript

$( document ).ready(function(){

    //call the firebase.app namespace and store it to the the constant app
    const app = firebase.app();
    //log detail to console. 
    // not required but does allo the testing to see if the app is working
    console.log(app);
    //load the firebase db into the constant DB
    const db = firebase.firestore();


//JQUERY FOR GETTING A STUDENT DETAILS AND OUTPUTTING TO TABLE:


        db.collection("students").onSnapshot(function(querySnapshot) {

        querySnapshot.forEach(function(doc) {

            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
            let student = doc.data();
            // pull the student data into the table, the escape characters between each set of data denote a new unit
            // currently this is handed pulled from the DB, however it would be better to use a for loop

            $('#overallDashboard > tbody:last-child').append(

                    '<tr> \
                        <th scope="row">'+doc.id+'</th> \
                         <td>'+student.first_name+'</td> \
                         <td>'+student.last_name+'</td> \
                         \
                         <td>'+student.UnitGrades.IT1.CG+'</td> \
                         <td>'+student.UnitGrades.IT1.PG+'</td> \
                         <td>'+student.UnitGrades.IT1.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT2.CG+'</td> \
                         <td>'+student.UnitGrades.IT2.PG+'</td> \
                         <td>'+student.UnitGrades.IT2.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT3.CG+'</td> \
                         <td>'+student.UnitGrades.IT3.PG+'</td> \
                         <td>'+student.UnitGrades.IT3.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT6.CG+'</td> \
                         <td>'+student.UnitGrades.IT6.PG+'</td> \
                         <td>'+student.UnitGrades.IT6.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT8.CG+'</td> \
                         <td>'+student.UnitGrades.IT8.PG+'</td> \
                         <td>'+student.UnitGrades.IT8.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT9.CG+'</td> \
                         <td>'+student.UnitGrades.IT9.PG+'</td> \
                         <td>'+student.UnitGrades.IT9.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT12.CG+'</td> \
                         <td>'+student.UnitGrades.IT12.PG+'</td> \
                         <td>'+student.UnitGrades.IT12.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT13.CG+'</td> \
                         <td>'+student.UnitGrades.IT13.PG+'</td> \
                         <td>'+student.UnitGrades.IT13.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT15.CG+'</td> \
                         <td>'+student.UnitGrades.IT15.PG+'</td> \
                         <td>'+student.UnitGrades.IT15.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT17.CG+'</td> \
                         <td>'+student.UnitGrades.IT17.PG+'</td> \
                         <td>'+student.UnitGrades.IT17.TG+'</td> \
                         \
                         <td>'+student.UnitGrades.IT21.CG+'</td> \
                         <td>'+student.UnitGrades.IT21.PG+'</td> \
                         <td>'+student.UnitGrades.IT21.TG+'</td> \
                         \
                         <td>Calc</td> \
                         <td>Calc</td> \
                         <td>Calc</td> \
                     </tr>' 


                     );//close append



    }); //end for each loop
});//end onsnapshot



    // JQUERY CODE FOR ADDING A STUDENT

    // form for submitting function
    $("#submitStudent").click(function (event) {



        const db = firebase.firestore();
        console.log(db);

        //search document IDs in database
        let student = db.collection("students").doc($("#addStudentNumber").val());

            // add students to the DB
            student.get().then(function(doc) {
                if (doc.exists) {
                    console.log("Document already exists:", doc.data());


                } else {
                    // doc.data() will be undefined in this case
                    console.log("No such document!");

                    student.set({
                    "first_name": $("#addStudentFirstName").val(),
                    "last_name": $("#addStudentLastName").val(),
                    "DOB": $("#addStudentDOB").val(),
                    "completion_year": $("#addStudentCompletionYear").val(),
                    "student_number": $("#addStudentNumber").val(),
                    "student_email": $("#addStudentEmail").val(),
                    "UnitGrades":{ 
                        "IT1": { 
                            "id":"IT1",
                            "name":"Fundamentals of IT",
                            "type":"Exam",
                            "GLH":90,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        }, 
                        "IT2": { 
                            "id":"IT2",
                            "name":"Global Information",
                            "type":"Exam",
                            "GLH":90,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT3": { 
                            "id":"IT3",
                            "name":"Cyber Security",
                            "type":"Exam",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT6": {
                            "id":"IT6",
                            "name":"Appilication Design",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT8": { 
                            "id":"IT8",
                            "name":"Project Management",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT9": { 
                            "id":"IT9",
                            "name":"Product Development",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT12": { 
                            "id":"IT12",
                            "name":"Mobile Technology",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT13": { 
                            "id":"IT13",
                            "name":"Social Media and Digital Marketing",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT15": { 
                            "id":"IT15",
                            "name":"Games Design and Prototyping",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT17": {
                            "id":"IT17",
                            "name":"Internet of Everything",
                            "type":"CWK",
                            "GLH":60, 
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        },
                        "IT21": { 
                            "id":"IT21",
                            "name":"Web Design and Prototyping",
                            "type":"CWK",
                            "GLH":60,
                            "CG": "F",
                            "PG": "F",
                            "TG": "F"
                        }
                    }
                    })
                    .then(function() {
                        console.log("Document successfully written!");

                    })
                    .catch(function(error) {
                        console.error("Error writing document: ", error);
                    });
                }

                }).catch(function(error) {
                    console.log("Error getting document: ", error);
                });

                // outputData();

                db.collection("students").get().then(function(querySnapshot) {
                    querySnapshot.forEach(function(doc) {
                        // doc.data() is never undefined for query doc snapshots
                        console.log(doc.id, " => ", doc.data());

                });
                    })
                    .catch(function(error) {
                        console.log("Error getting documents: ", error);
            });

        }) //close submit form click function


//close document read function              
    });

Я ожидаю, что в таблице будет показан новый документ, который был добавлен

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

Обновление

Использование ответа Фрэнкаvan Puffelen Я разрешил это

Я создал новую переменную html с пустым div внутри. Затем я использовал .add, чтобы добавить код для каждой итерации цикла for, как было написано ранее.

Затем я использовал .html для вызова переменной html и обновления кода страницы.

db.collection("students").onSnapshot(function(querySnapshot) {


                        let html = $("<div></div>");

                        querySnapshot.forEach(function(doc) {

                            let student = doc.data();



                            html = html.add($('<tr> \
                                        <th scope="row">'+doc.id+'</th> \
                                         <td>'+student.first_name+'</td> \
                                         <td>'+student.last_name+'</td> \
...

$('#overallDashboard > tbody:last-child').html(html);

Answer 1

У вас есть этот код, который прослушивает данные и изменения в базе данных:

db.collection("students").onSnapshot(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        let student = doc.data();

        $('#overallDashboard > tbody:last-child').append(
            ...

Имейте в виду, что onSnapshot вызывается со всеми данными в коллекции. Поэтому при первом подключении к Firestore и при изменении данных вы получаете все документы из students и , добавляя их к #overallDashboard. Это означает, что в первый раз вы в конечном итоге со всеми студентами. Скажем, у вас 3 ученика, и в итоге вы получите таблицу:

student 1
student 2
student 3

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

student 1 // first time onSnapshot got called
student 2
student 3
student 1 // second time onSnapshot got called
student 2
student 3
student 4

И когда вы, например, удаляете первого ученика, вы получаете:

student 1 // first time onSnapshot got called
student 2
student 3
student 1 // second time onSnapshot got called
student 2
student 3
student 4
student 2 // third time onSnapshot got called
student 3
student 4

Существует два решения проблемы:

1. Очистить таблицу каждый раз, когда вызывается onSnapshot.

2. Определите точное изменение, которое было внесено в данные, и обновите HTML-код для этого.

Хотя второй подход более эффективен, он также немного сложнее. Поэтому вместо этого я покажу простой подход, который заключается в очистке HTML-кода в таблице каждый раз, когда вызывается onSnapshot:

db.collection("students").onSnapshot(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        let student = doc.data();

        $('#overallDashboard > tbody:last-child').html(
            ...