Array.filter() in Angular 2 Component
It returns the filtered ones and don't change the actual array. You are doing something wrong
const strs = ['valval', 'bal', 'gal', 'dalval'];const result = strs.filter(s => s.includes('val'));console.log(strs);console.log(result);
First thing we need to know is, if we filter our list we loose our original data
products: any[] = [ { "productId": 1, "productName": "foo-bar", "price": 32.99 }]and can't get it back without re-getting the data from it's source so we have to make another list to store the filtered list.
filteredProduce: any[];Next if you are working to show a list of filtered product on a grid or something like this we need a way to know when the user changes the filter criteria. we could use event binding and watch for key presses or value changes, but an easier way is to change our _listFilter property into a getter and setter, like this
get listFilter: string { return this._listFilter;}set listFilter(value:string) { this._listFilter= value;}next we want to set our filteredProducts array to the filtered list of products like this
set listFilter(value:string) { this._listFilter= value; this.filteredProducts = this._listFilter? this.performFilter(this._listFilter) : this.products;}in preceding code we are using js conditional operator to handle the posibility that _listFilterstring is empty, null or undefined.Next we use this.performFilter(this._listFilter) to filter our list.
performFilter(filterBy: string): any[] { filterBy = filterBy.toLocaleLowerCase(); return this.products.filter((product: any) => product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);}Finally we should assign the main list of products to the filteredProducts and _listFilter to what we want.
constructor() { this.filteredProducts = this.products; this._listFilter= 'foo-bar'; }last step is to change our template to bind to our filteredProducts property.