JQuery - Как повторно использовать данные из JSON?

Question

У меня есть setTimeout, который перезагружает функцию каждые 5 секунд.

интервал = setTimeout (update_list, 5000);

update_list, отображает входы в виде. Когда есть много входов, если вы прокрутите вниз, список очищается и перезагружается каждый вход.

Как я могу сделать так, чтобы код сравнивал старый и новый входы, только отображал новые и удалял старые?

    function update_list()
{
    $('#list').empty();
    var month= new Array();

    month[0] = '{% trans 'Jan' %}';
    month[1] = '{% trans 'Feb' %}';
    month[2] = '{% trans 'Mar' %}';
    month[3] = '{% trans 'Apr' %}';
    month[4] = '{% trans 'May' %}';
    month[5] = '{% trans 'Jun' %}';
    month[6] = '{% trans 'Jul' %}';
    month[7] = '{% trans 'Aug' %}';
    month[8] = '{% trans 'Sep' %}';
    month[9] = '{% trans 'Oct' %}';
    month[10] = '{% trans 'Nov' %}';
    month[11] = '{% trans 'Dec' %}';

    today = new Date();
    var ddToday = ('0'+today.getDate()).slice(-2);
    var mmToday = today.getMonth()+1;
    mmToday = ('0'+mmToday).slice(-2);

    // hace llamado
    var getUrl = "{{ meetings_api_url }}" + url_args;
    $.get(getUrl, function(data){
        if (is_ongoing_active ){
            interval = setTimeout(update_list, 5000);
        }

        var Data = data;

        var i;
        var Data = Data.meetings;
        jQuery(Data).each(function(i, item){

            var meeting_id = item.meeting_id;
            var name = item.name;
            var begin = new Date(item.begin);
            var end = item.end;
            var participants = item.total_participants;

            var ddBegin = begin.getDate();
            var mmBegin = begin.getMonth()+1;
            mmBegin = ('0'+mmBegin).slice(-2);
            var MMBegin = month[mmBegin-1];
            var hhBegin = ('0'+begin.getHours()).slice(-2);
            var minBegin = ('0'+begin.getMinutes()).slice(-2);

            if(end != null){
                var headerBegin = '('+ddBegin+' '+MMBegin+') '+hhBegin+':'+minBegin;
                end = new Date(end);
                var ddEnd = end.getDate();
                var mmEnd = end.getMonth()+1;
                mmEnd = ('0'+mmEnd).slice(-2);
                var MMEnd = month[mmEnd-1];
                var hhEnd = ('0'+end.getHours()).slice(-2);
                var minEnd = ('0'+end.getMinutes()).slice(-2);

                if(ddBegin == ddEnd && mmBegin == mmEnd){
                    var headerEnd = hhEnd+':'+minEnd;
                }else{
                    var headerEnd = '('+ddEnd+' '+MMEnd+') '+hhEnd+':'+minEnd;
                }
            }else{
                headerBegin = hhBegin+':'+minBegin;
                if (ddBegin == ddToday && mmBegin == mmToday){
                    var headerEnd = '{% trans 'Ongoing' %}';
                } else{
                    headerBegin = '('+ddBegin+' '+MMBegin+') '+hhBegin+':'+minBegin;
                    var headerEnd = '{% trans 'Ongoing' %}';
                }
            }

            render_meeting(meeting_id, name, headerBegin, headerEnd, participants);
        })

    });
}

function render_meeting(id, title, begin, end, participants)
{
    var meeting = `
        <a href="` + meeting_url_format.replace('0', id) + `" class="list-group-item">
            <h4 class="list-group-item-heading">` + title + `</h4>
            <p class="list-group-item-text">
                ` + begin + ` - ` + end +
                `<span class="pull-right">
                    <span class="glyphicon glyphicon-user"></span>
                    ` + participants +`
                </span>
            </p>
        </a>`
    $('#list').append(meeting);
}

Answer 1

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

Внутри

jQuery(Data).each(function(i, item){

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

render_meeting(meeting_id, name, headerBegin, headerEnd, participants);