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

Problema com o método de pesquisa videos?q=${termoDeBusca}

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!

1 resposta
solução!

Após dar uma pesquisada aqui no fórum, vi que outras pessoas tiveram o mesmo problema.

Consegui solucioná-lo ao fazer a instalação de uma versão inferior do json-server conforme as instruções desse post do fórum: https://cursos.alura.com.br/forum/topico-botao-da-pesquisa-nao-puxa-nada-480289