AULA 8 TÓPICO 3 IMPLEMENTANDO A LÓGICA DE FILTRAGEM

Oi Leandro, tudo bem?

Acredito que seu problema seja justamente o forEach. Vejamos por que: O this é uma referência muito dinâmica. No caso do professor, o this se refere ao campo de input no qual a função addEventListener se refere.

No seu código o this pode estar referenciando duas coisas possíveis: A própria função dentro forEach ou o Array de pacientes.

O que você pode fazer pra solucionar isso é capturar o valor do input antes de fazer o foreach, armazenar esse valor em uma variável e depois comparar dentro do if normal. Pegou a ideia ou quer o trecho de código pra testar?

Wanderson, tudo bem?

Coloquei um console.log dentro e fora da função para identificar o que o this esta sendo. Realmente, fora da função ele é o valor do input, dentro da função ele é "undefinied". Porem quando tentei colocar uma variavel recebendo this.value fora do each e chamar ela no IF não funcionou também. Você poderia me ajudar a corrigir meu código?

Abaixo o que eu fiz:

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

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

    var pacientes = document.querySelectorAll(".paciente");
    var nomeThis = this.value;
    console.log('valor do this fora do each:' +' '+this.value);

    pacientes.forEach(

        function(paciente){

        var tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
            console.log('valor do this dentro do each:' +' '+this.value);


            if (nome != nomeThis){
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }
        }
    );
});

Opa Leandro, não consigo ver nenhum problema no seu código agora. Tem como você me disponibilizar seu projeto completo pra mim testar?

Wanderson tudo bem?

https://we.tl/DruBcrG3UR

Segue o link do WeTransfer, obrigado

Opa Leandro, o problema na verdade era outro. Veja o código como ficou:

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

    pacientes.forEach(function(paciente){
        var tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
            if (nome != nomeThis){
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }
        }
    );
});

Nada muito diferente do que você já fez. Eu só apaguei algumas coisas desnecessárias. Seu código funciona, mas qual é o problema?

Quando você filtra, você exibe somente o paciente que tiver exatamente aquele nome. Precisa digitar o nome completo. Mas se a gente apagar tudo que tiver no input não aparece nada, isso por que, nenhum paciente tem nome em branco. Faz sentido?

No caso, precisamos verificar se no campo de input, o valor é vazio, caso seja, precisamos exibir todos os pacientes de volta.

Assim podemos fazer um if e outro laço.

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

        pacientes.forEach(function(paciente){
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
                if (nome != nomeThis){
                    paciente.classList.add("invisivel");
                } else {
                    paciente.classList.remove("invisivel");
                }
            }
        );
    }else{
        pacientes.forEach(function(paciente){
            paciente.classList.remove("invisivel");
        });
    }
});

O problema não era o forEach, entendeu agora qual era realmente o problema?

Bom dia Wanderson, tudo bem?

Rsrsrs entendi sim, então o forEach estava correto (a função tinha um parâmetro a mais que eu vi que você tirou também), só faltava colocar o IF validando se o campo está em branco e caso esteja limpa a classe "invisivel" ... Faz sentido sim, fiz um teste aqui e funcionou, escrevi na mão as suas alterações para eu aprender também, em vez de só copiar colar e testar hehehe

Wanderson MUITO obrigado pela sua atenção e paciência, agradeço imensamente por tirar a minha dúvida e me ajudar...

Opa, conta sempre com a gente aqui da Alura, Leandro. Estamos sempre de olho!

Fico feliz que tenha ajudado!