Как добавить в DOM только один раз в методе опроса ajax - PullRequest
Новая
       26

Как добавить в DOM только один раз в методе опроса ajax

0 голосов
/ 20 июня 2019

Я постепенно отказываюсь от использования jQuery для каждой отдельной ситуации, используя его только там, где это необходимо, при использовании синтаксиса ES6.

У меня есть некоторый код, который отправляет запрос AJAX каждые x секунд.Я хотел бы убедиться, что ответ добавляется только один раз в DOM.

Я попытался проверить, существует ли недавно добавленный элемент DOM, который работает.Единственная проблема состоит в том, что всякий раз, когда новый запрос ajax получен, новый ответ не будет добавлен в div.

То, что я думаю, должно быть хорошим решением, это создать новый массив и проверить,Новый массив содержит данные ответа.Если нет, то добавьте HTML-код и вставьте его в этот новый массив, но я не могу понять, как. 

const theGroup = 12345;

function request() {
    setTimeout( () => {
        $.ajax({
            ...,
            success: (response) => {
                let obj = [];
                let i = 0;

                $(response).each((key, value) => {
                    let id = value.id;
                    let name = value.name;
                    let age = value.age;
                    let groupnr = value.groupnr;

                    obj[i++] = 
                       { id: id, name: name, age: age, groupnr: groupnr 
                    };

                });

                let checkPerson = (person) => person.id == theGroup;
                let filtered = obj.filter(checkPerson);

                if(!$('div.text-div').length > 0 ) {
                    $('body').append('<div class="text-div"></div>');

                    // if I append the filtered array in here, any new ajax
                    // response will not be added without a refresh.
                }

                filtered.forEach(value) => {
                    // how to append only once?
                    // I am trying to put value into a new array
                    // but right before I push it, I check if the value.id
                    // exists or not. If it doesn't, then <p> should append
                    // and value should be pushed into the new array.
                    // How can I best achieve this?
                    $('div.text-div').append('<p>' + value.name + '</p>');
                }

            },
            complete: function() {
               request();
            }
        });
    }, 30000);
}

request();

Если бы существовало дружественное к ES6> (или даже FP) решение, это быбыть классным.

...