Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Erro 401 e pesquisa não efetuada

O meu vidFlow não faz a filtragem dos vídeos pelo nome, além de aparecer inúmeras vezes o erro 401 na ferramenta do desenvolvedor. Alguém poderia me ajudar com isso?? Este é o código que fiz durante a aula

const containerVideos = document.querySelector('.videos__container')

async function buscarVideos() {
  try {
    const busca = await fetch('http://localhost:3000/videos')
    const videos = await busca.json()

    videos.forEach((element) => {
      if (element.categoria == '') {
        throw new Error('Vídeo sem categoria!')
      }
      containerVideos.innerHTML += `
      <li class="videos__item">
      <iframe src="${element.url}" title="${element.titulo}" frameborder="0" allowfullscreen></iframe>
    
      <div class="descricao-video">
      <img class="img-canal" src="${element.imagem}" alt="Logo do Canal">
      <h3 class="titulo-video">${element.titulo}</h3>
      <p class="titulo-canal">${element.descricao}</p> 
      </div>
      </li>
      `
    })
  } catch (error) {
    containerVideos.innerHTML = `<p>Ocorreu um erro ao carregar os vídeos: ${error}</p>`
  }
}

buscarVideos()

const barraDePesquisa = document.querySelector('.pesquisar__input')

barraDePesquisa.oninput = filtrarPesquisa()

function filtrarPesquisa() {
  const videos = document.querySelectorAll('.videos__item')
  const textoPesquisa = barraDePesquisa.value.toLocaleLowerCase()

  videos.forEach((video) => {
    let titulo = video
      .querySelector('.titulo-video')
      .textContent.toLocaleLowerCase()

    video.style.display = textoPesquisa
      ? titulo.includes(textoPesquisa)
        ? 'block'
        : 'none'
      : 'block'
  })
}
1 resposta
solução!

Olá João, tudo bem? Espero que sim!

Primeiro, sobre o erro 401, ele geralmente ocorre quando há um problema de autenticação. Isso pode significar que a URL que você está tentando acessar precisa de um login ou de um token de autenticação. Verifique se a API que você está tentando acessar precisa de algum tipo de autenticação ou se a URL está correta.

Quanto à filtragem dos vídeos pelo nome, percebi que você está chamando a função filtrarPesquisa() no evento oninput da barraDePesquisa, mas você está chamando essa função imediatamente, ao invés de passá-la como referência para ser chamada quando o evento ocorrer. Isso pode estar causando o problema de a filtragem não estar funcionando corretamente. Tente alterar a linha de código para:

barraDePesquisa.oninput = filtrarPesquisa;

Note que removemos os parênteses após filtrarPesquisa. Dessa forma, você está passando a função em si para ser chamada quando o evento oninput ocorrer, e não o resultado da função.

Além disso, é importante lembrar que a função filtrarPesquisa() está sendo chamada antes da função buscarVideos() ter finalizado, o que pode causar um problema, pois os vídeos podem não ter sido carregados ainda quando a filtragem é feita. Uma solução seria chamar a função filtrarPesquisa() dentro do buscarVideos(), após a criação dos elementos de vídeo.

Espero que essas sugestões possam te ajudar a resolver os problemas que você está enfrentando. Lembre-se de testar cada alteração separadamente para identificar o que resolve cada problema.

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

Abraços e bons estudos!