Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Usar logica com forEach para implementar filtro - Não está funcionando

Referente ao curso JavaScript: programando na linguagem da web

por Daniel Lucas
| 405.8k xp | 76 posts
Estudante Universitário

Olá pessoal, 

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 nome = paciente.querySelector(".info-nome").textContent;
            var expressao = new RegExp(this.value, "i");

            /* Essa logica tambem nao funciona, mesmo se digitar o nome correto ele nao é exibido
            if(nome != this.value){
                paciente.classList.add("invisivel");
            }else{
                paciente.classList.remove("invisivel");
            }*/

            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");
        }
    }
 });

Acima temos uma tentativa de implementar a função de filtrar vista na aula 8, porém, apesar dela me parecer semelhante ao que consta no arquivo final do projeto do curso, não funciona. Ao digitar qualquer coisa no input os pacientes da tabela desaparecem todos, mesmo que seja digitado um nome correto ele não volta a ficar visivel, apenas quando o campo é limpo os pacientes voltam a ser exibidos.

Fiz algumas tentativas de debug com o console.log() mas não consegui entender exatamente o problema, alguém poderia me ajudar ?

Desde já, obrigado !

2 respostas
solução!
por Pedro Ávila
| 330.4k xp | 175 posts

Olá Daniel, o problema é que o contexto do this muda dentro de uma função. Neste caso o this para de apontar para o elemento paciente e passa a apontar para o objeto global que no caso do navegador é o objeto Window.

Isto será mais explicado nos cursos avançados.

Uma solução seria guardar o valor do this em uma variável fora da função forEach:

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

    if (this.value.length > 0) {
        var self = this
        pacientes.forEach(function (paciente) {
            var nome = paciente.querySelector(".info-nome").textContent;
            var expressao = new RegExp(self.value, "i");
            console.log(this)
            console.log(self)
...

Outra solução seria usar uma nova funcionalidade do ES 2015, a arrow function (função flecha).

Uma arrow function além de encurtar o código para criar uma expressão de função também trás o this com escopo léxico:

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

    if (this.value.length > 0) {
        pacientes.forEach((paciente) => {
            var nome = paciente.querySelector(".info-nome").textContent;
            var expressao = new RegExp(self.value, "i");
            console.log(this)
...

Arrow functions também serão explicadas nos cursos avançados, porém se desejar compreender de imediato posso sugerir estes dois vídeos:

por Daniel Lucas
| 405.8k xp | 76 posts
Estudante Universitário

Obrigado Pedro!

Dúvida Solucionada :-)