如何在获取时避免数据重复？

Question

I have a simple fetch function that gets data (messages from db) and putting it into an array to display it with simple vanilla JS. The thing is I am calling this function every 2 seconds in order to check for new messages. But when I do that I duplicate my messages and it keeps adding instead of replacing. I am struggling to understand what I should do to change, not add.

(a little dummy question, sorry)

const list = document.getElementById('message-list');

const getData = () => {
  fetch('/messages')
  .then((resp) => resp.json()) 
  .then(function(data) {
    console.log(data)

    for (let i = 0; i < data.length; i++) {

        const listItem = document.createElement('li');
        listItem.innerText = data[i].message;
        const delButton = document.createElement('button');
        delButton.innerHTML = 'Delete';
        delButton.addEventListener('click', ()=>{
          const message_id = data[i].message_id;
          deleteItem(message_id);
        })
      listItem.appendChild(delButton);
      list.appendChild(listItem)
      }
    })
}

setInterval(getData,2000)

Answer 1

Make a Set of the message_id s processed so far, and on further calls, ignore messages matching that message_id :

const seenIds = new Set();
const getData = () => {
  fetch('/messages')
    .then((resp) => resp.json())
    .then(function(data) {
      data
        .filter(({ message_id }) => !seenIds.has(seenIds))
        .forEach(({ message, message_id }) => {
          seenIds.add(message_id);
          const listItem = document.createElement('li');
          listItem.innerText = message;
          const delButton = document.createElement('button');
          delButton.textContent = 'Delete';
          delButton.addEventListener('click', () => {
            deleteItem(message_id);
          });
          listItem.appendChild(delButton);
          list.appendChild(listItem)
        });
      });
};

That said, it would probably be better to change your backend so that it can filter the items for you, rather than sending objects over the net that proceed to get ignored.