Entrar Ainda não tem acesso?
2
respostas

Mensagem de erro usando for( in )

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Rafael
| 202.6k xp | 32 posts
var campoFiltro = document.querySelector("#filtrar-tabela");
//console.log(campoFiltro);

campoFiltro.addEventListener("input", function(){
    var pacientes = document.querySelectorAll(".paciente");
    //console.log(this.value);
    var inputDigitado = this.value;//ATRIBUINDO O VALOR CONTIDO NO INPUT PARA A VARIÁVEL.

    if(inputDigitado.length > 0){
        pacientes.forEach(function (paciente) {
           // pacientes = paciente;
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;

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

        });
    }else{
        for(index in pacientes){
            var paciente = pacientes[index];
            paciente.classList.remove("invisivel");
        }
    }
});

Ao executar o código usando for in o mesmo apresenta uma mensagem de erro. Gostaria de saber o porque e também se o uso desse loop representa alguma má pratica de programar em javascript.

2 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Rafael tudo bem?

Eu uso for of, porque me lembra o for each de outras linguagens. Mas não é má prática usar o for in, ele não está listado como depreciado pela MDN https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in

Que navegador e versão está usando?

Posta a pasta do seu projeto no github, por gentileza, para podermos analisar todo o projeto.

por Guilherme Augusto Duque E Silva Costa
| 301k xp | 22 posts
Desenvolvedor

Rafael, não é assim que se usa o for in

Olha o exemplo abaixo:

//Objeto
var obj = {a:1, b:2, c:3};

//Para prop (propriedade) in obj (objeto) faça
for (var prop in obj) {
  // ctrl+shift+k (para abrir o console no mozilla firefox)
  console.log("obj." + prop + " = " + obj[prop]);
}

//A saída (output) deverá ser:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Não tem problema se não entender.

Resumidamente, o for in procura todos atributos de um objeto, e não todos os elementos de um array ou alguma coisa iterável.

Em outras palavras, o for in é usado para outros tipos problemas, e não para esse caso de iterar sobre uma lista ou array.

para seu for ter o comportamento esperado, você tem duas opções básicas:

Opção A:

for(var index=0; index < pacientes.length; index++){
    var paciente = pacientes[index];
    paciente.classList.remove("invisivel");
}

Opção B:

for(paciente of pacientes){
    paciente.classList.remove("invisivel");
}

Espero ter ajudado.

para mais referências:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for...of

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in