时间戳

首页 > 解决方案 > JQuery - 如何重用来自 JSON 的数据？

javascript - JQuery - 如何重用来自 JSON 的数据？

问题描述

我有一个 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);
}

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

您应该将所有信息保存在一个数组中，并且每次检查新信息时都会将其与当前信息进行比较，并且只添加新信息。

在 - 的里面

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

在调用渲染过程之前检查新会议是否已经存在：

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

推荐阅读