Как очистить старые данные при повторном вызове той же функции в JavaScript, используя веб-Firebase

Question

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

ЭтоМой JS-код: -

function getusersdata(ca)
{



        var rootRef = firebase.database().ref().child("users").orderByChild('designation').equalTo(ca);

    rootRef.on("child_added", snap =>{

        var name = snap.child("name").val();
        var designation = snap.child("designation").val();

        $("#ServicesData").append("<tr><td>" + name + "</td><td>" + designation + "</td></tr>");



    });




}

Это HTML-код: -

<button class="btn btn-primary" style="border: 0px; border-radius: 2px;" onclick="getusersdata('CA')" id="CA">CA</button> 

CS

Answer 1

Проблемы лежат с $("#ServicesData").append()

Вы добавляете (добавляете) новые результаты в существующую таблицу DOM. Сначала необходимо удалить <tr> из старого набора данных, а затем добавить новый <tr> из набора результатов.

Что-то вроде $("#ServicesData tr").remove(), если я правильно помню.

Ваш заголовок таблицы должен использовать <th>, чтобы избежать его удаления.

Answer 2

Я подозреваю, что ответ заключается в том, как вы просматриваете свои переменные.

Область действия

Если вы хотите, чтобы рассматриваемые переменные умирали вместе с функцией, их нужно будет объявить как локальные переменные этой функции. Необъявленная переменная автоматически становится глобальной в JavaScript. Глобальная переменная останется постоянной при вызовах функций.

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

(Вообще говоря, все переменные должны быть объявлены в начале их соответствующих областей. Существуют исключения, но обычно это хорошая цель.)