Vue中的过滤，嵌套数组答案

【问题标题】：Filtering in Vue, nested arrayVue中的过滤，嵌套数组
【发布时间】：2018-01-26 20:04:48
【问题描述】：

我正在尝试创建一个计算函数，可以通过“警报”过滤掉我的对象，

所以我创建了一个计算函数，称为 filteredAlarms，并在我的循环中执行 v-for 循环：

<li class="event-log__item timeline__item" v-for="(item, key) in filteredAlarms" :key="key">

在我的过滤器中，我尝试执行以下操作：

let filteredAlarms = Object.keys(this.eventLog).forEach(key => {
  this.eventLog[key].filter(item => {
    return item.type.indexOf("alarm") > -1
  });
});

return filteredAlarms

不幸的是，这不起作用 - 我收到一个错误：TypeError: this.eventLog.filter is not a function

我做错了什么？ :)

我试图过滤的对象类似于以下对象：

"system_events": {
    "1013": [{
        "id": 25899,
        "timestamp": "2017-08-15T21:26:42Z",
        "type": "alarm",
        "code": 190,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T21:26:40Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Randers pr 44b sidste station"
    }, 
    {
        "id": 26157,
        "timestamp": "2017-08-15T21:32:17Z",
        "type": "warning",
        "code": 190,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T21:32:06Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Randers pr 44b sidste station"
    }, 
    {
        "id": 26387,
        "timestamp": "2017-08-15T21:37:38Z",
        "type": "info",
        "code": 190,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T21:37:33Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Randers pr 44b sidste station"
    }],
    "1015": [{
        "id": 23777,
        "timestamp": "2017-08-15T20:38:08Z",
        "type": "alarm",
        "code": 191,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T20:38:00Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Favrskov Svenstrup gyvelvej"
    }, 
    {
        "id": 23779,
        "timestamp": "2017-08-15T20:38:08Z",
        "type": "alarm",
        "code": 190,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T20:37:58Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Favrskov Svenstrup gyvelvej"
    }, 
    {
        "id": 23841,
        "timestamp": "2017-08-15T20:39:41Z",
        "type": "alarm",
        "code": 192,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T20:39:31Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Favrskov Svenstrup gyvelvej"
    }, 
    {
        "id": 25243,
        "timestamp": "2017-08-15T21:12:03Z",
        "type": "alarm",
        "code": 191,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T21:11:55Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Favrskov Svenstrup gyvelvej"
    }, 
    {
        "id": 25529,
        "timestamp": "2017-08-15T21:18:11Z",
        "type": "alarm",
        "code": 190,
        "title": "",
        "description": "",
        "appeared": "2017-08-15T21:18:00Z",
        "disappeared": null,
        "acknowlegded": null,
        "solved": null,
        "system_name": "Favrskov Svenstrup gyvelvej"
    }]
}

【问题讨论】：

标签： javascript ecmascript-6 vue.js

【解决方案1】：

使用 forEach，您无需过滤任何内容，而是进行迭代。并且过滤器内部返回新数组，所以它也不会改变eventLog[key]。

试试这样的：

let filteredAlarams = {}

Object.keys(this.eventLog).forEach(key => {
  filteredAlarams[key] = this.eventLog[key].filter(item => {
    return item.type.indexOf("alarm") > -1
  });
});

return filteredAlarms

【讨论】：

【解决方案2】：

首先，filteredAlarms 的值是undefined，因为forEach 不返回任何内容。

其次，您应该知道filter() 返回一个新数组。您没有在任何地方使用新的过滤数组。

可能是这样的

const filteredAlarms = Object.keys(this.eventLog).reduce((result, key) => {
     result[key] = this.eventLog[key].filter(item => {
       return item.type.indexOf("alarm") > -1
     })

     return result
}, {})

return filteredAlarms

然后是

TypeError: this.eventLog.filter is not a function

我的猜测是您正在尝试遍历上面发布的整个对象，但您应该遍历 data.system_events 属性。

【讨论】：

map 会产生一个数组，而我猜filteredAlarms 需要保持对象。
@dfsq 是的，我现在意识到了，我已经编辑了代码。