Entrar Ainda não tem acesso?
1
resposta

QUANDO PESQUISO CONTINUA APARECENDO AS PESQUISAS ANTERIORES COMO PROCEDER

Referente ao curso JavaScript: consumindo e tratando dados de uma API, no capítulo Criando filtros de exibição e atividade Construindo a lógica de pesquisa

por Nathaly Isabely Dos Santos Silva
| 37.1k xp | 25 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade `const containerVideos = document.querySelector('.videos__container'); const barraDePesquisa = document.querySelector('.pesquisar__input')

async function buscarEMostrarVideos() {

try {
    const busca = await fetch("http://localhost:3000/videos");
    const videos = await busca.json();
    videos.forEach((video) => {
        containerVideos.innerHTML += ` 
            <li class="videos__item">
                <iframe src="${video.url}" title"${video.titulo}" frameborder="0" allowfullscreen></iframe>
                <div class="descricao-video">
                    <img class="img-canal" src="${video.imagem}" alt="logo do canal">
                    <h3 class="titulo-video">${video.titulo}</h3>
                    <p class="titulo-canal">${video.descricao}</p>
                 </div>
            </li>
            `
    })
} catch (error) {
    containerVideos.innerHTML = `<p>Erro ao carregar vídeos. Erro:${error}</p>`
}

} buscarEMostrarVideos()

barraDePesquisa.addEventListener('input', filtrarPesquisa);

function filtrarPesquisa() { const videos = document.querySelectorAll(".videos__item");

if (barraDePesquisa.value != "") {
    for (let video of videos) {
        let titulo = video.querySelector(".titulo-video").textContent.toLowerCase();
        let valorFiltro = barraDePesquisa.value.toLowerCase();

        if (!titulo.includes(valorFiltro)) {
            video.style.display = "none";
        } else {
            videos.forEach(video => video.style.display = 'block');
        }

    }
}

}`

1 resposta
por Danilo Thiago Alves de Oliveira
| 47.3k xp | 70 posts
Desenvolvedor Fullstack Sr

Boa noite Nathaly, primeiramente uma dica, uma das coisas que temos que evitar é usar nome de variáveis repetidas dentro de uma mesma função, pode acabar confundindo. Veja que você utiliza a variável video dentro do for e dentro do forEach.

Mas agora vamos para o seu erro, ele está na sua condição dentro do else, vou tentar explicar o que está acontecendo para você entender.

Quando o for roda ele pega o primeiro video e compara o que está escrito no input, se o texto do input não contiver (não sei nem se existe essa palavra =P) no texto do video, ele não vai mostrar o video (display none), dai ele passa para o próximo video, nesse outro video o conteúdo do input contém dentro do título do video, com isso, cai dentro do else, dentro do else você está pegando a variável videos e executando um forEach, pegando cada video e colocando o display block, ou seja, aquele seu primeiro video que você tinha colocado o display none voltou a ser block.

Para resolver o problema, você pode deixar assim:

if (barraDePesquisa.value != "") {
    for (let video of videos) {
        let titulo = video.querySelector(".titulo-video").textContent.toLowerCase();
        let valorFiltro = barraDePesquisa.value.toLowerCase();

        if (!titulo.includes(valorFiltro)) {
            video.style.display = "none";
        } else {
            video.style.display = "block";
        }
    }
} else {
    videos.forEach(video => video.style.display = 'block');
}

Caso queira ver a explicação da instrutora novamente, volta na aula por volta dos 4:10 do vídeo ela fala sobre.

Espero ter ajudado.