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

[Dúvida] Função filtrarPorCategoria

Referente ao curso JavaScript: consumindo e tratando dados de uma API

por Valentina Corradini Prado
| 71.7k xp | 10 posts
Estagiária de Desenvolvimento

No mesmo capítulo, existe um desafio de refatoração para a função da barra de pesquisa. Ao ver a criação da função filtrarPorCategoria, achei a estrutura muito semelhante e decidi, então, refatorar e fazer diferente do curso. Tentei implementar a mesma lógica utilizando um forEach e operador ternário ao invés de for of e if/else, mas não funciona (mesmo tentando seguir solução da refatoração). Por que o código criado (que é o que está comentado) não funciona corretamente?

function filtrarPorCategoria(filtro) {
    const videos = document.querySelectorAll('.videos__item');
    for(let video of videos){
        let categoria = video.querySelector(".categoria").textContent.toLowerCase();
        let valorFiltro = filtro.toLowerCase();

        if(!categoria.includes(valorFiltro) && valorFiltro != 'tudo'){
            video.style.display = "none";
        } else {
            video.style.display = "block";
        }
    }
    // videos.forEach(video => {
    //     let categoria = document.querySelector(".categoria").textContent.toLowerCase();
    //     const valorFiltro = filtro.toLowerCase();
    //     video.style.display = !categoria.includes(valorFiltro) && categoria != "tudo" ? "none" : "block";
    // )}
}
2 respostas
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Valentina, como vai? Espero que esteja bem!

A ideia é boa e a refatoração pode, de fato, tornar o código mais legível e conciso. No entanto, parece que há um pequeno erro no seu código refatorado que está causando o problema.

No seu código original, você está selecionando a categoria do vídeo dentro do loop for of com a linha let categoria = video.querySelector(".categoria").textContent.toLowerCase();. Isso garante que a categoria seja selecionada para cada vídeo individualmente.

No entanto, na sua refatoração, parece que você esqueceu de referenciar o vídeo atual no seu forEach. Você está fazendo let categoria = document.querySelector(".categoria").textContent.toLowerCase();, o que sempre selecionará a categoria do primeiro vídeo, independentemente do vídeo atual no loop forEach.

Para corrigir isso, você deve alterar essa linha para let categoria = video.querySelector(".categoria").textContent.toLowerCase();, assim como você fez no código original. Aqui está a versão corrigida do seu código refatorado:

videos.forEach(video => {
    let categoria = video.querySelector(".categoria").textContent.toLowerCase();
    const valorFiltro = filtro.toLowerCase();
    video.style.display = !categoria.includes(valorFiltro) && valorFiltro != "tudo" ? "none" : "block";
})

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

por Valentina Corradini Prado
| 71.7k xp | 10 posts
Estagiária de Desenvolvimento

Muito obrigada Sarah!