1
resposta

[Dúvida] o consele.log está me retornando uma array vazia

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

let videos = [];
const endereco = "http://localhost:3000/videos";
const areaDeVideos = document.querySelector('.videos__container');
const formulario = document.querySelector("[data-formulario]");
const botaoPesquisa = document.querySelector(".pesquisar__botao");

//função async/awit para captar os dados
async function pegaDados(){
   const resposta = await fetch(endereco);
   videos = await resposta.json();
   mostraVideos(videos);
}

pegaDados()

async function buscaDados(evento){
   const conexao = await fetch(`http://localhost:3000/videos?q=${evento}`)
   const conexaoConvertida = await conexao.json()
   return conexaoConvertida
}

async function buscaVideo(evento){
   evento.preventDefault()

   const botaoPesquisa = document.getElementById("pesquisar").value;
   const busca = await buscaDados(botaoPesquisa)
   console.log(busca)
}

botaoPesquisa.addEventListener('click', evento => buscaVideo(evento))

//função para adicionar os videos na tela
function mostraVideos(listaDeVideos){
   listaDeVideos.forEach(video => {
      areaDeVideos.innerHTML += 
      `<li class="videos__item">
               <iframe width="100%" height="72%" src="${video.url}"
                   title="${video.titulo}" frameborder="0"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                   allowfullscreen></iframe>
               <div class="descricao-video">
                   <img src="${video.imagem}" alt="logo canal alura">
                   <h3>${video.titulo}</h3>
                   <p>${video.descricao}</p>
               </div>
      </li>`
   });
}

formulario.addEventListener('submit', adicionaVideo)

async function adicionaVideo(evento){
   evento.preventDefault();
   const url = document.getElementById('url').value;
   const titulo = document.getElementById('titulo').value;
   const imagem = document.getElementById('imagem').value;
   const novoVideo = {
      url: url,
      titulo: titulo,
      imagem: imagem,
   }
   try {
      const res = await fetch(endereco, {
         method: "POST",
         headers:{
            "Content-type": "application/json"
         },
         body: JSON.stringify(novoVideo)
      })

      if (res.ok) {
         window.location.href = './envio-concluido.html';
      } else {
         console.error("Não foi possivel enviar o vídeo");
      }
   } catch (error) {
      console.error("Não foi possivel enviar o vídeo", error);
   }
}

link repositório: https://github.com/LeonardoSardagna/aluraPlay/blob/master/js/conectaAPIS.js

1 resposta

Olá Leonardo!

O link para o seu repositório está quebrado, mas utilizei o que foi compartilhado em outro tópico mas no momento o mesmo está desativado também, e apenas atualizando o código JS, não obtive o mesmo erro, nesse caso peço que me envie o link do seu repositório atualizado.

Peço também para verificar se a API foi inicializada corretamente e o conteúdo da mesma está como o da aula, ao pesquisar por 'mobile' obtive esse retorno(estou no firefox):

print retirado do console

Outra observação é que pode ser necessário utilizar uma versão estável do JSON Server; nesse caso, peço que execute o seguinte comando:

npm install -g json-server@0.17.0

Fico no aguardo em caso de persistência do erro, espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!