[Dúvida] [ERRO] Failed to Fetch | JavaScript: consumindo e tratando dados de uma API

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

const barraDePesquisa = document.querySelector(".pesquisar__input");

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 {
                video.style.display = "block";
            }
        }  
    } else {
        video.style.display = "block";
    }
}

Tentei adicionar o forEach para percorrer a lista de vídeos mas não resolveu

videos.forEach(video => video.style.display = 'block');

Ja tentei adicionar outro for dentro do else para ver se o problema seria resolvido:

else {
        for (let video of videos) {
            video.style.display = 'block';
        }
    }

mas sem sucesso, alguém sabe o que poderia resolver?

Vamos analisar o código fornecido e buscar uma solução para o erro "Failed to Fetch". No entanto, percebo que o código compartilhado está relacionado à filtragem de vídeos com base em uma barra de pesquisa. Vamos abordar ambos os tópicos.

A função filtrarPesquisa que você implementou parece estar no caminho certo para filtrar os vídeos conforme o valor digitado na barra de pesquisa. No entanto, observei um pequeno equívoco na lógica dentro do bloco else. Parece que você está tentando reverter a exibição de todos os vídeos para "block", mas a variável video não está definida nesse escopo. Sugiro ajustar essa parte do código da seguinte maneira:

else {
    for (let video of videos) {
        video.style.display = 'block';
    }
}

Essa correção deve resolver o problema de exibição dos vídeos quando a barra de pesquisa está vazia. Agora, quanto ao problema relacionado ao "Failed to Fetch", parece que o código fornecido está mais relacionado à lógica de filtragem do que à busca de dados em uma API. Se o problema persistir e estiver relacionado a uma solicitação de API, seria útil compartilhar mais detalhes sobre essa parte específica do código.

Se o "Failed to Fetch" estiver relacionado a uma chamada de API e não ao código fornecido, por favor, forneça mais detalhes sobre como você está realizando a requisição, incluindo a parte do código que trata dessa lógica. Isso nos permitirá fornecer uma orientação mais precisa.

Se você estiver usando a função fetch para obter dados da API, certifique-se de tratar erros adequadamente. Por exemplo:

fetch('sua_url_da_api')
    .then(response => {
        if (!response.ok) {
            throw new Error('Erro ao buscar dados da API');
        }
        return response.json();
    })
    .then(data => {
        // Lógica para lidar com os dados da API
    })
    .catch(error => {
        console.error('Erro na requisição da API:', error);
    });

Essa estrutura de código ajudará a identificar e tratar erros durante a busca de dados da API. Se o problema persistir, verifique se a URL da API está correta e se há algum bloqueio de CORS (Cross-Origin Resource Sharing) que pode estar causando o "Failed to Fetch".

Mergulhe em programação