IDを使用して同じオブジェクトを画面上に複製しないようにするにはどうすればよいですか？

Question

jsonファイルに格納されているオブジェクトの配列があり、各オブジェクトはidです。

[ 
    { 
     "time": "1500058550", 
     "id": 1 
    }, 
    { 
     "time": "1500058551", 
     "id": 2 
    } 
] 

およびファイルから私のjsロードメッセージ、たとえば、5秒ごとに（と、それを表示する）新しいオブジェクトが添加することができるので。しかし、ファイルからのダウンロードは、両方の（新しいものと古いもの）オブジェクトがロードされるように行われます。オブジェクトがすでにロードされているかどうかを確認するには、どうすればidをチェックできますか？

callback(
 
    [{ 
 
     "time": "1500064939", 
 
     "id": 1 
 
    }, 
 
    { 
 
     "time": "1500064940", 
 
     "id": 2 
 
    } 
 
    ]); 
 

 
function callback(respond) { 
 
    setTimeout(function tick() { 
 
    var timeNow = Date.now(); 
 
    for (var i = 0; i < respond.length; i++) { 
 
     var data = respond[i]; 
 
     var timeInMessage = data.time * 1000; 
 
     var diff_time = (timeNow - timeInMessage); 
 
     if (diff_time <= 36000000) { 
 
     var newDate = new Date(timeInMessage); 
 
     var res = [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()].map(function(x) { 
 
      return x < 10 ? "0" + x : x; 
 
     }).join(":"); 
 
     var rowClone = $('.mess_hide').clone().removeClass('mess_hide'); 
 
     $('#messages').append(rowClone); 
 
     $('.time', rowClone).html(res); 
 
     } 
 
    } 
 
    setTimeout(tick, 5000); 
 
    }, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scroller"> 
 
    <table id="messages"> 
 
    <tr class="mess_hide"> 
 
     <td class="time"></td> 
 
    </tr> 
 
    </table> 
 
</div>

どう私は、このチェックを実装していますか？私はこれをする方法を知らない、助けてください。

Answer 1

idsを配列に格納し、レンダリングする前に確認してください。

var loadedItemsIds = []; 

for (var i = 0; i < respond.length; i++) { 
    var data = respond[i]; 
    if (loadedItemsIds.indexOf(data.id) >= 0) continue; 
    loadedItemsIds.push(data.id); 

    // do you stuff with the data 
    ... 
} 

これは、その後、DOMにアクセスし、そこに検索をより速く、より簡単な、より良い..です