Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problema ao filtrar usando ForEach

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Filtrando com expressão regular

por matheusjouan
| 94.5k xp | 7 posts

Boa noite. Estou com uma dúvida.. Quando utilizo o forEach não ocorre a filtragem, e depois de debugar eu acho que encontrei o motivo. Ele dá undefined ao ler o "this.value", porém se eu coloco no lugar do this.value 'campoFiltro.value" ele reconhece o valor que está sendo digitado no input. Também se eu não utilizar o ForEach e sim o for, ele funciona normalmente. Qual seria o motivo? Segue abaixo o código e agradeço a atenção.

var campoFiltro = document.querySelector('#filtro');

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');
        console.log('>>> ' + this.value);
        if(!expressao.test(nome)) {
            paciente.classList.add("invisivel");
        }
        else {
            paciente.classList.remove("invisivel");
        }
    });
}
else {
    for(var i = 0; i < pacientes.length; i++) {
        var paciente = pacientes[i];
        paciente.classList.remove("invisivel");
    }
}

});

1 resposta
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite! Como vai?

O problema é o this que tem valor dinâmico dependendo do lugar onde vc o utiliza!

Dentro de uma função callback, como em

campoFiltro.addEventListener("input", function() {
     console.log(this); // Irá imprimir o campo de filtro!
});

o this irá representar quem chamou a função callback! Nesse caso, como a função é invocada sempre que uma atualização ocorre no valor do campoFiltro, o this irá representar justamente esse elemento HTML!

Contudo, vc utilizou o this dentro da função callback do forEach()!

campoFiltro.addEventListener("input", function() {
     console.log(this); // Irá imprimir o campo de filtro!

     var pacientes = document.querySelectorAll('.paciente');
     pacientes.forEach(function(paciente) {
          console.log(this); // Irá imprimir o objeto window.
     });
});

De modo que o valor do this muda e passa a ser o objeto window! Como esse objeto não tem o atributo value, this.value retorna undefined como vc mesmo disse no seu comentário!

Já com o for tudo funciona pois ele não é uma função e, portanto, o this continua representando o input de filtro!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!