Delete record from an array of objects in javascript-CodePudding

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

CodePudding user response：

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');

CodePudding user response：

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?

CodePudding user response：

You can avoid the setTimeout() delay if you take the pronmise 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);