vue.js 在javascript中从对象数组中删除记录

rggaifut 于 2022-12-04 发布在 Vue.js

关注(0)|答案(3)|浏览(181)

我有一个从api中得到的对象数组，我得到了数据，但是我想删除那些在x时间之后具有完成状态的对象。
首先我必须显示所有记录，一定时间后必须删除状态为“完成”的记录

我使用的是vue

我得到的回答是：

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

以下是获取信息的方法：
我使用setTimeout，以便能够在特定时间后删除具有FINISH状态的记录

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

我已经尝试过遍历数组并创建一个条件，它对我很有效，但是当我再次调用该方法时，我再次得到具有FINISH状态的记录。

mounted () {
    this.getTurns();

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

也许我需要以另一种方式排序，或者我可以使用另一个javascript方法

vue.js

来源：https://stackoverflow.com/questions/74656973/delete-record-from-an-array-of-objects-in-javascript

3条答案

按热度按时间

laik7k3q1#

filter正是你所需要的。我不明白为什么你把所有的东西都包在setInterval里，然后等5或6秒。
为什么不返回筛选后的数据呢？

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

赞(0）回复(0）举报 2022-12-04

cgh8pdjw2#

你在这个地方犯了错误
将data放入过滤器前的组件属性turns中;
过滤后执行以下操作：

.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)
})

对不起，我不明白你为什么在fetch里面使用setTimeout。你确定有必要吗？

赞(0）回复(0）举报 2022-12-04

wlsrxk513#

你可以避免setTimeout()的延迟，如果你把承诺当作它是：一个承诺，一些数据将在那里！
以下代码段将在从远程数据源接收到全局变量turns中的数据后立即提供该数据然后过滤数据以排除属性.company.catchphrase包括单词“zero”的任何条目，并将其放置到全局变量turns中。.then()中函数getTurns()（返回一个promise！）之后的回调函数只有在解析了promise之后才会被触发。

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

赞(0）回复(0）举报 2022-12-04

我来回答

vue.js 在javascript中从对象数组中删除记录

3条答案

相关问题

热门标签

最新问答