I have retrieved an array of objects from an api, and while I am able to successfully fetch the data, I am looking for a way to automatically remove objects with a "FINISH" status after a certain period of time.
Initially, all records should be displayed, but those with a "FINISH" status need to be removed after a specified time duration.
I am currently utilizing Vue.js for this task.
This is the response I receive:
[
{
"id": "289976",
"status": "FINISH"
},
{
"id": "302635",
"status": "PROGRESS"
},
{
"id": "33232",
"status": "PROGRESS"
}
]
This is the method responsible for fetching the information:
I am using setTimeout to schedule the deletion of records with a "FINISH" status after a specific time interval
getTurns() {
fetch('ENPOINT', {
method: 'POST',
body: JSON.stringify({id: this.selected}),
headers: {
'Content-Type': 'application/json'
}
}).then(response => response.json())
.then(data => {
this.turns = data;
data.forEach(turn => {
if(turn.status == 'FINISH'){
setTimeout(() => {
this.turns = data.filter(turn => turn.status !== 'FINISH');
}, 6000);
}
});
})
.catch(error => console.error(error));
}
I have attempted to create a conditional loop through the array which works successfully. However, upon calling the method again, I found that records with a "FINISH" status reappear. Since the data continuously updates, I need to call the method frequently.
mounted () {
this.getTurns();
setInterval(() => {
this.getTurns();
}, 5000);
}
Perhaps there is another approach or JavaScript method that could address this issue more effectively.