Olá!
Estou realizando o curso e me deparei com um problema que não estou conseguindo resolver:
Ao tentar acessar um elemento pelo link localhost:3000/videos?q=memes, por exemplo, tenho recebido como resposta todos os elementos e não somente o que contém o que estou pesquisando - não acontece nada na página, é como se eu tivesse dado um f5.
No console.log dentro da execução da função que busca o vídeo (pelo termo do input de pesquisa) me retorna um array com todos os itens e não somente o que contém a palavra pesquisada.
Antes de, como na aula, tratar os resultados com o loop while (que está removendo os firstChild, um de cada vez), a página duplicava todo o conteúdo a cada nova pesquisa. Agora com o while não acontece nada (ou melhor, acontece de ele remover tudo e inserir de novo).
A função buscaVideo (que está sendo exportada de) dentro do arquivo conectaApi.js está assim:
async function buscaVideo(termoDeBusca) {
const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`)
const conexaoConvertida = conexao.json();
return conexaoConvertida;
}
E o conteúdo de buscaVideo.js, onde a função está sendo utilizada, está assim:
import { conectaApi } from "./conectaApi.js";
import constroiCard from "./mostrarVideos.js";
async function buscarVideo(evento) {
evento.preventDefault();
const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
const busca = await conectaApi.buscaVideo(dadosDePesquisa);
const lista = document.querySelector("[data-lista]");
while (lista.firstChild) {
lista.removeChild(lista.firstChild);
}
busca.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
console.log(busca);
}
const botaoDePesquisa = document.querySelector("[data-botao-pesquisa]");
botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento));
Estou fazendo algo de errado, fora de ordem ou coisa do tipo? Como posso fazer funcionar? Não sei se é relevante mas estou usando o Mozilla Firefox como navegador.
Agradeço a atenção!