Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Exercício filtra.js utilizando forEach

Boa tarde! Estou tentando utilizar o forEach no lugar do laço for, porem a funcionalidade de filtro para de Funcionar. O forEach esta funcionando, porem o filtro bugou. Estou testando a expressão regular... A dúvida é quando utilizar o forEach?

var campoFiltro = document.querySelector("#filtrar-tabela");
campoFiltro.addEventListener("input", function(){
    var pacientes = document.querySelectorAll(".paciente");
    if(this.value.length > 0){
        pacientes.forEach(function(paciente){
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            var expressao = new RegExp(this.value, "i");//busca tanto letras maiusculas como minusculas
            if(!expressao.test(nome) )
                paciente.classList.add("invisivel");
            else    
                paciente.classList.remove("invisivel");
        });
    } else{
            pacientes.forEach(function(paciente){
                paciente.classList.remove("invisivel");
            });
        }
});
8 respostas

Opa, mas qual foi o erro que deu? Quer dizer, deu algum erro :)?

O Filtro para de funcionar utilizando o forEach!

Colocando o laço assim, que foi disponibilizado no exemplo da aula...

for(int i=0; i<pacientes.length; i++){
var paciente = pacientes[i];
///resto do código

...o Filtro volta a funcionar!

Oi Fernando, Qual navegador você está utilizando, e qual versão do mesmo ?

Google Chrome - Versão 56.0.2924.87

Testou se funciona em outros navegadores? Tente abrir o console de desenvolvedor e ver o erro que aparece.

solução!

oi Fernando,

pelos testes que eu fiz aqui, dentro do foreach, o this não esta se referindo ap campo campoFiltro e portanto o this.value fica indefido, experimente com o console.log . Para dar certo, você precisa trocar o

var expressao = new RegExp(this.value, "i");

e explicitar o nome do campo

var expressao = new RegExp(campoFiltro.value, "i");

agora da certo, experimente.

Muito bom Jefferson! Também resolvi utilizando a ArrowFunction ao invés da Function , pois => tem valor de referência ao this Globalmente. Assim mantem a referência ao campoFiltro.

Também testei a solução que o Jefferson mandou, pois estava tendo o mesmo erro e funcionou!Show!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software