過濾在Vue公司，嵌套數組

Question

我試着去創建一個計算的功能，可以通過「報警」過濾掉我的對象，

所以我創建了一個計算函數，稱爲filteredAlarms，並在我的循環IM做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 

不幸的是，這並不工作 - 即時得到一個錯誤：類型錯誤：this.eventLog。過濾器不是一項功能

我在做什麼錯？ :)

對象即時試圖過濾器是類似下面的一個東西：

"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" 
    }] 
} 

Answer 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 

Answer 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屬性。