Primeiramente achei a solução muito boa, então parabéns. Agora uma pequena correção.
Nessa linha recomendo mudar a arbodagem. Ao invés do código orignal, como está abaixo
return (item === null ? "" : item.toString().includes(event.target.value.toString()));
Utilizar essa implementação
return (item === null ? "" : item.toString() === event.target.value.toString());
Explico o motivo da mudança. O .include() vai verificar se determinado valor existe em um array, nesse caso digamos que a gente tivesse o seguinte array
const array = [
{
nome: "Nathally",
idade: 21
},
{
nome: "Nathalia",
idade: 23
},
{
nome: "Nath",
idade: 35
}
]
Neste caso, se você usar o código original e buscar somente por "Nath" ele retornará os 3 elementos, pois vai considerar que a string "Nath" existe na propriedade nome dos 3 objetos, o que é verdade. Então para evitar esse "erro", boto entre aspas pois não entendi se esse comportamento é esperado ou não, com a sugestão de correção ele retornará apenas o elemento que de fato apresenta a propriedade nome com o valor "Nath".
O código final sugerido fica assim
const Filter = (event) => {
return arr.filter(obj => {
return Object.values(obj).map(item => {
return (item === null ? "" : item.toString() === event.target.value.toString());
}).includes(true);
});
}
Espero que ajude :)
Oi Nathsouza!
Realmente, a sua correção se aplica bem no que foi passado, sou muito grato por ter percebido esse equívoco!
Na minha aplicação no sistema real, acabou por ser um live-search que filtra com o event "keypress". Então ele me mostra resultados em tempo real, para cada tecla inserida, não precisando, necessáriamente, mostrar apenas os resultados em que os valores sejam estritamente iguais. Dessa maneira, precisa apenas conter uma parcela do valor real para que já sejam mostrados para o usuário.
Porém, como no exemplo não foi citado isso, e o exemplo é diferente da aplicação real, a sua correção está certíssima!
Muito obrigado!