javascript - 从服务器中提取数据并附加到列表而不复制列表

Question

美好的一天!我一直在通过 jquery 使用 get 请求从 flask 服务器中提取数据并将其附加到我的 html 上的列表中。但是我必须在添加新列表之前删除列表，否则它会将相同的值添加到列表中。有没有办法检查值列表，如果在列表中找到任何新值，则只添加该值。谢谢。这是我的代码。

function message(){
 $('#message_ol').children().remove()  ###Here i have to remove the list before add to it.
 $.getJSON('/message',
 function(data){
  for (var i = 0; i < data.length; i++){
    if (data[i].verb == 'yes'){
      var snd = new Audio("static/img/beep.mp3");
      snd.play();
      snd.currentTime=0;
    }
    $('#message_ol').append("<li>"+ data[i].message +"</li>")
  }
})
}


###If i dont remove the  list then this happens. Every 5 seconds jquery pulls the data from the server
1. Message 1
2. Message 2
###5 seconds
3. Message 1
4. Message 2
5. Message 3
###Same values added plus new ones

Answer 1

我没有对此进行测试，但这是基本思想......假设如@Steve0 所示......你想确保你的 JSON 响应中有一个唯一标识符，以确保数据尚未添加到列表。

function message(){
//  $('#message_ol').children().remove()  ###Here i have to remove the list before add to it.
$.getJSON('/message', function(data){
    for (var i = 0; i < data.length; i++){

        if (data[i].verb == 'yes'){
            var snd = new Audio("static/img/beep.mp3");
            snd.play();
            snd.currentTime=0;
        }

        if($("#message_ol>li[data-message='" + data[i] + "']").length === 0){
            $('#message_ol').append('<li data-message="'+data[i]+'">' + data[i].message +'</li>')
        }
    }
})