1
resposta

Filtragem com ForEach

Estou tentando fazer a filtragem utilizando o foreach porém sem sucesso.

Quando eu mudo o código para o for normal ele funciona sem problemas. Ou seja eu creio que esta relacionada em alguma parte do foreach.

Meu código
var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function(){

  var pacientes = document.querySelectorAll(".paciente");

  if(this.value.length > 0){
    pacientes.forEach(function(){
      console.log(pacientes);
      var tdNome = document.querySelector(".info-nome");

      var nome = tdNome.textContent;

      if(nome != this.value){
        pacientes.classList.add("invisivel");
      } else {
        pacientes.classList.remove("invisivel");
      }
    });
  } else {
    pacientes.forEach(function(){
      paciente.classList.remove("invisivel");
    });
  }

});
Código do Instrutor

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function(){
    console.log(this.value);
    var pacientes = document.querySelectorAll(".paciente");

    if (this.value.length > 0){
        for (var i = 0; i < pacientes.length; i++){

            var paciente = pacientes[i];

            var tdNome = paciente.querySelector(".info-nome");

            var nome = tdNome.textContent;

            if (nome != this.value){
                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

Boa noite, João! como vai?

Isso ocorre pois a função que vc passa como parâmetro do forEach() tem um escopo próprio. E é a esse escopo que o this dentro da função se refere, acarretando nesse erro que vc está tendo. Contudo, esse não é o momento de se preocupar com esses detalhes. Mais pra frente, em cursos mais avançados de JavaScript, esse assunto será abordado. Então eu não irei dar nenhum spoiler que provavelmente traria mais questionamentos do que respostas. Siga em frente rumo à luz do conhecimento que vc irá obter as informações que busca!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

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