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

ForEach para Filtrar

Eu gostaria de saber se há possibilidade de usar o forEach ao For comum em ambos os for's, como ficaria?

Eu tentei apenas no segundo e não consegui. Ele da erro o seguinte erro

Uncaught TypeError: Cannot read property 'classList' of undefined
    at file:///C:/Users/Pichau/Desktop/niko-javascript/JS-alura/introducao/projeto-aparecidaNutricao/js/filtra.js:21:12
    at NodeList.forEach (native)
    at HTMLInputElement.<anonymous> (file:///C:/Users/Pichau/Desktop/niko-javascript/JS-alura/introducao/projeto-aparecidaNutricao/js/filtra.js:20:13)

Se possivel, como ficaria com forEach?

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

campoFiltro.addEventListener("input", function(){
    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{
        pacientes.forEach(function(){
            paciente.classList.remove("invisivel");
        });
    }
});
4 respostas

Basicamente um for each é "para cada item dessa lista pacientes faça", e ai você passa uma função do que deve ser feito, na sua função você ta pegando uma variável paciente, e esta removendo a class "invisivel", oque acontece é que dentro desse forEach , você não definiu oque é a variável "paciente". precisamos definir cada paciente lá dentro do seu forEach.

olhando a documentação do forEach no W3C lá ele fala que a função que o foreach chama, pode receber até 3 parâmetros, o primeira , vai ser o objeto atual, o segundo a posição do objeto no array, e o terceiro o array inteiro, mas você não precisa obrigatoriamente adicionar os 3 parâmetros, e no seu caso , você não precisaria, então vamos lá a um exemplo.

pacientes.forEach(function(objetoPaciente){
            objetoPaciente.classList.remove("invisivel");
        });

veja que esse exemplo é praticamente igual o seu , a diferença é que a na function , falamos que ela vai receber um parâmetro, e lá propositalmente alterei o nome para "objetoCliente", para que fique claro que o nome da variável depende exclusivamente do nome definido no parentese

Então se eu passar a minha variável "páciente" definida lá em cima do código na function, também serve? Se não serve é por isso que nesse caso/exercicio é melhor utilizar o For comum?

solução!

Serve, mas o valor anterior da variável sera perdido. oque acontece é que em casa execução do forEach ele utiliza sua variável para o objeto pessoa correto.

é como se ele fizesse isso , por trás dos panos de maneira automática:

var paciente = pacientes[i];

Só que em vez de ele criar a variável paciente, ele utiliza a que foi informada no parâmetro ele vai passar por todos os pacientes contidos nessa lista.

forEach , não é nada mais que uma abreviação/facilitação do uso do for Convencional.

Acredito que todos os cenários que se usa For, poderia utilizar forEach sem problemas, talvez em algumas poucas situações pode haver uma perda de performance , mas algo irrisório.

esse seu primeiro for por exemplo ficaria assim :

 pacientes.forEach(paciente){
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;

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

*talvez tenha algum erro porque não pude testar, mas acredito que esta correto, testa ele ai, e pega alguns for's que você já tenha feito, e tenta passar para forEach

Sim, minha dúvida era essa. se fazia alguma diferença usar o for ou forEach, afinal o ForEach enxuga mais o código, ai estranhei que ele não usou, por isso vim tirar a dúvida, obrigado.

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