Динамически изменять свойство внутри функции фильтра JavaScript

Question

Я хочу изменить свойство d.name на d.role или d.id внутри функции фильтра на основе параметра, переданного через родительская функция. Я не могу получить к нему доступ через функцию фильтра.

   const temp = this.temp.filter(function(d) {
   return d.name.toLowerCase().indexOf(val) !== 
    -1 || !val;
    });

Каков наилучший способ сделать это? Я провел некоторые поиски, но не могу найти хорошее решение. Любая помощь будет оценена!

Answer 1

Здесь вы всегда можете использовать другой шаблон доступа к элементам.

Сохранение d[keyToFilterOn] со значением keyToFilterOn в качестве 'роли' аналогично d.role.

Так почему бы не сделать что-то вроде этого:

let keyToFilterOn = 'role'; // or id
const temp = this.temp.filter(d => {
  return d[keyToFilterOn].toLowerCase().indexOf(val) !== -1 || !val;
});

Таким образом, вам не нужно будет создавать для него функцию.

Альтернативный

Вы можете создать AngularPipe и затем использовать его в своем классе TypeScript:

Вот 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;
    });
  }

}

Вот как это использовать:

import { FilterPipe } from 'path/to/the/pipe';

class YourComponent {

  YourFunction(value) {
    let filteredData = new FilterPipe().transform(this.temp, keyToFilterOn, val);
  }
}

Хотя Angular на самом деле не рекомендует использовать Pipe для фильтрации данных. Но поскольку это используется внутри класса, а не в шаблоне, это нормально.

Answer 2

Вы можете обернуть свою функцию фильтра внутри другой функции и просто передать имя свойства, по которому вы хотите фильтровать.

Например:

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

Answer 3

Для этого вы можете использовать синтаксис в квадратных скобках, поэтому он становится

   key = 'role'

   const temp = this.temp.filter((d) => {
     return d[key].toLowerCase().indexOf(val) !== 
        -1 || !val;
   });