I want to change the property d.name to d.role or d.id inside of the filter function based on a parameter passed through the parent function. I can't access it inside the filter function though.
const temp = this.temp.filter(function(d) {
return d.name.toLowerCase().indexOf(val) !==
-1 || !val;
});
What would be the best way to do this? I've done some searching but I can't seem to find a good solution. Any help would be appreciated!
You can use square bracket syntax for this, so it becomes
key = 'role'
const temp = this.temp.filter((d) => {
return d[key].toLowerCase().indexOf(val) !==
-1 || !val;
});
this scoping. The scope of this changes inside each enclosing function, however if we use an arrow function, it retains the enclosing scope, so this remains definedYou can wrap your filter function inside other function and simply pass in in the property name on which you want to filter.
For example :
let arr = [{name :"xyz", role:"admin"},{name :"xyz", role:"teacher"},{name :"abc", role:"admin"}];
function filterList(arr, prop, val){
return arr.filter(e=> e[prop] == val);
}
console.log(filterList(arr, "role", "admin" ));
console.log(filterList(arr, "name", "xyz" ));You can always use another Object Member Access Pattern here.
Keeping d[keyToFilterOn] with the value of keyToFilterOn as 'role' is similar to doing d.role.
So why not doing something like this:
let keyToFilterOn = 'role'; // or id
const temp = this.temp.filter(d => {
return d[keyToFilterOn].toLowerCase().indexOf(val) !== -1 || !val;
});
This way, you won't have to create a function for it.
You can create an AngularPipe and then use it in your TypeScript Class:
Here's the filter
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(temp: any[], filterBy: string, filterValue: any): any {
if (!filterBy || !filterValue) {
return input;
}
return temp.filter(d => {
return d[filterBy].toLowerCase().indexOf(filterValue) !== -1 || !filterValue;
});
}
}
Here's how to use it:
import { FilterPipe } from 'path/to/the/pipe';
class YourComponent {
YourFunction(value) {
let filteredData = new FilterPipe().transform(this.temp, keyToFilterOn, val);
}
}
Although Angular doesn't really recommend using a Pipe for filtering data. But since this is being used inside a class and not in the template, it's fine.
.filter()seems like a really questionable idea.closures. They are basically functions that can return functions with different parameters.