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

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 — terpinmd
– terpinmd, Commented Dec 2, 2022 at 14:22

Valerij Dobler · Accepted Answer · 2022-12-02 14:07:59Z

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

answered Dec 2, 2022 at 14:07

Valerij Dobler

2,9251 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CherryDT Over a year ago

Because the finished items should vanish after a few seconds

Desarrollador Over a year ago

It's the business rule, the script should do that

gureenkov56 · Accepted Answer · 2022-12-02 15:03:24Z

1

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?

edited Dec 2, 2022 at 15:03

answered Dec 2, 2022 at 14:16

gureenkov56

1723 bronze badges

8 Comments

Desarrollador Over a year ago

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 Over a year ago

@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 Over a year ago

@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 Over a year ago

@Desarrollador Should the data be updated every 5 seconds?

Desarrollador Over a year ago

@gurenkov56 as possible, but the important thing is that they update from time to time

|

gureenkov56 · Accepted Answer · 2022-12-05 02:02:14Z

0

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'

answered Dec 5, 2022 at 2:02

gureenkov56

1723 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2022-12-02 19:49:23Z

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

Collectives™ on Stack Overflow

Delete record from an array of objects in javascript

4 Answers 4

2 Comments

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related