Как отфильтровать несколько значений в React

Question

Я пытаюсь выполнить поиск в массиве, но пока я могу искать только по имени, чего я хочу достичь. Я тоже хочу включить фамилию. Например, если пользователь выполняет поиск, содержащий фамилию или имя, я хочу отобразить данные. Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Код

 handleByNameChange = (e) => {
    let value = e.target.value;
    let updatedList = this.props.userData.allUsersForFilter;
    updatedList = updatedList.filter(function (item) {
      return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1;
    });

    this.setState({
      byNameInputValue: value,
      items: updatedList,
    });
  };

Массив объекта

[
{firstName: 'Martin', lastName :'Jonas'},
{firstName:'Brad',lastName:'Mickle'},
{fitstName: 'Summer, lastName:'Bride'}
]

Answer 1

Создайте функцию, которая принимает массив для поиска, массив ключей свойств для поиска и значение для поиска. Если массив ключей свойств пуст, то, вероятно, не должно быть никакого фильтра, вернуть все элементы.

• Использовать array: some для возврата true / false, если выполняется одно из условий ключей свойств.
• Используйте string :: includes, чтобы проверить, содержит ли строка подстроку.

функция searchBy

const searchBy = (arr = [], searchKeys = [], value = '') => {
  return arr.filter(item =>
    searchKeys.length ? searchKeys.some(key =>
      (item[key] || "").toLowerCase().includes(value.toLowerCase())
    ) : true
  );
};

Использование

handleByNameChange = (e) => {
  const { value } = e.target;
  const updatedList = this.props.userData.allUsersForFilter;

  this.setState({
    byNameInputValue: value,
    items: searchBy(updatedList, ['firstName', 'lastName'], value),
  });
};

const data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
  { firstName: "Axel", lastName: "Rod" },
  { firstName: "Mike", lastName: "Haxel" }
];

const searchBy = (arr = [], searchKeys = [], value = '') => {
  return arr.filter(item =>
    searchKeys.length ? searchKeys.some(key =>
      (item[key] || "").toLowerCase().includes(value.toLowerCase())
    ) : true
  );
};

console.log(searchBy(data, [], "Martin"));
console.log(searchBy(data, ["lastName"], ""));
console.log(searchBy(data, ["firstName"], "Martin"));
console.log(searchBy(data, ["firstName"], "Summer"));
console.log(searchBy(data, ["firstName", "lastName"], "ax"));

Приложение - поиск объединенного полного имени

const searchByName = (arr = [], value = "") => {
  return arr.filter(({ firstName = '', lastName = '' }) =>
    [firstName, lastName, `${firstName} ${lastName}`].some(el =>
      el.toLowerCase().includes(value.toLowerCase())
    )
  );
};

Пытается сопоставить имя или фамилию, затем полное имя

const data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
  { firstName: "Axel", lastName: "Rod" },
  { firstName: "Mike", lastName: "Haxel" }
];

const searchByName = (arr = [], value = "") => {
  return arr.filter(({ firstName = '', lastName = '' }) =>
    [firstName, lastName, `${firstName} ${lastName}`].some(el =>
      el.toLowerCase().includes(value.toLowerCase())
    )
  );
};

console.log(searchByName(data, "Martin"));
console.log(searchByName(data, ""));
console.log(searchByName(data, "Summer"));
console.log(searchByName(data, "ax"));
console.log(searchByName(data, "Mike Ha"));

Весь код в демонстрационной песочнице

Редактировать несколько значений массива фильтров

Answer 2

Можно сделать примерно так:

const updatedList = [
  {firstName: 'Martin', lastName :'Jonas'},
  {firstName:'Brad',lastName:'Mickle'},
  {firstName: 'Summer', lastName:'Bride'}
  ];

  updatedList = updatedList.filter(function (item) {
    return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1 || 
     item.lastName.toLowerCase().search(value.toLowerCase()) !== -1;
  });

Answer 3

updatedList = updatedList.filter(function (item) {
    if(value) {
        return item.firstName.toLowerCase().indexOf(value.toLowerCase()) > -1 || item.lastName.toLowerCase().indexOf(value.toLowerCase()) > -1;
      } else {
      return "";
      }
});

Это очень базовая c проверка, которая является ясной и лаконичной, она проверяет, совпадают ли значения имени или фамилии элементы с предоставленными элементами или нет.

Answer 4

Это вы ищете?

const data = [
{firstName: 'Martin', lastName :'Jonas'},
{firstName:'Brad',lastName:'Mickle'},
{firstName:'Summer',lastName:'Bride'}
]

//anyName , which might be first Name or last Name

function filterData(anyName){
        const res = data.filter(name => (name.firstName.includes(anyName)||name.lastName.includes(anyName)))
        return res;
}


console.log(filterData('ride'))

Answer 5

Используйте метод some для объединения массивов firstName и lastName. (Или верните (проверка firstName || проверка lastName)

data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
];
value = "ride";
updatedList = data.filter(({ firstName, lastName }) =>
  [firstName, lastName].some(
    (name) => name.toLowerCase().search(value.toLowerCase()) !== -1
  )
);

console.log(updatedList);