Delete record from an array of objects in javascript

Question

I have an array of objects that I get from an api, I get the data but I want to remove the ones that have a finish status after x time.

First I must show all the records, after a certain time the records with FINISH status must be deleted

I am using vue.

This is the response I get:

[
 {
 "id": "289976",
 "status": "FINISH"
 },
 {
 "id": "302635",
 "status": "PROGRESS"
 },
 {
 "id": "33232",
 "status": "PROGRESS"
 }
]

This is the method that obtains the information:

I use setTimeout to be able to delete the records with FINISH status after a certain time

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 tried going through the array and making a conditional and it works for me, but when I call the method again I get the records with FINISH status again. I need to call the method every time since the data is updated

 mounted () {
 this.getTurns();
 setInterval(() => {
 this.getTurns();
 }, 5000);
 } 

maybe I need to order in another way, or that another javascript method I can use

• terpinmd: Very odd. You should explain in more detail why you want to have a delay. Side note, you are mixing and matching setTImout and setInterval here

Answer 1

filter is exactly what you need. I don't get why you wrap everything in setInterval and wait for 5 or 6 seconds.

Why don't you return the filtered data instead?

return data.filter(turn -> turn.status !== 'FINISHED');

• CherryDT: Because the finished items should vanish after a few seconds
• Desarrollador: It's the business rule, the script should do that

Answer 2

You mistake in this place this.turns = data;

It put data in component property turns before filter;

Do it after filter:

.then(data => {
 // get before filter
 this.turns = data;
 
 // filter data after 6 sec
 setTimeout(() => {
 data.forEach(turn => {
 this.turns = data.filter(turn => turn.status !== 'FINISH');
 });
 }, 6000)
})

Sorry, but I don't understand why you use setTimeout inside fetch. Do you sure that it necessary?

• Desarrollador: I use setTimeout to be able to delete the records with FINISH status after a certain time, I can't think of another way it could be
• gureenkov56: @Desarrollador Please, can you write me how page has to behave. First step, second, next and next. I think setInterval(5000) and setTimer(6000) isn't the best way.
• Desarrollador: @gurenkov56 the page must call every certain time the method that obtains the data from the endpoint, that's why I use setInterval, the method must show all the data, but after a certain time it must delete the records with FINISH status, that's why I use setTimeout
• gureenkov56: @Desarrollador Should the data be updated every 5 seconds?
• Desarrollador: @gurenkov56 as possible, but the important thing is that they update from time to time

Answer 3

Code that you need on CodeSandBox. It sure works.

https://codesandbox.io/s/vue-getdata-and-filter-it-after-delay-6yrj16?file=/src/components/HelloWorld.vue

Use filter for your case: turn => turn.status !== 'FINISH'

Answer 4

You can avoid the setTimeout() delay if you take the promise as what it is: a promise that some data will be there!

The following snippet will provide the data in the global variable turns as soon as it has been received from the remote data source (in this example just a sandbox server). The data is then filtered to exclude any entry where the property .company.catchphrase includes the word "zero" and placed into the global variabe turns. The callback in the .then()after the function getTurns() (which returns a promise!) will only be fired once the promise has been resolved.

var turns; // global variable 
function getTurns() {
 return fetch("https://jsonplaceholder.typicode.com/users")
 .then(r => r.json()).then(data =>
 turns=data.filter(turn=>!turn.company.catchPhrase.includes("zero"))
 )
 .catch(error => console.error(error));
}
getTurns().then(console.log);