2
respostas

[Bug] Array vazia no console, erro no buscarVideo

Boa tarde, não estou conseguindo resolver esse problema. Já analisei todo o código, e não encontrei o erro. Quando digito na barra de pesquisa a tela fica sem nenhum vídeo. E a array responde vazia no console.log. Ja tentei abrir em outros navegadores e teve o mesmo erro.

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))
async function listaVideos() {
    const conexao = await fetch('http://localhost:3000/videos');
    const conexaoConvertida = await conexao.json();
    
    return conexaoConvertida;
}

async function criaVideo(titulo, descricao, url, imagem) {
    const conexao = await fetch('http://localhost:3000/videos', {
    method: "POST",
    headers: {
        "Content-type" : "application/json"
    },
    body: JSON.stringify({
        titulo: titulo,
        descricao: `${descricao} mil visualizações`,
        url: url,
        imagem: imagem
    })
});

const conexaoConvertida = conexao.json();
return conexaoConvertida;
}

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

}

export const conectaApi = {
    listaVideos,
    criaVideo,
    buscaVideo
}
2 respostas

Oii Elizabethe, tudo bem?

Pra te ajudar melhor, preciso que você coloque seu projeto completo em um repositório no GitHub pois assim consigo ter a visão completa do seu projeto e consigo te dar um suporte de forma mais assertiva.

Um abraço e bons estudos.

Tive o mesmo problema nessa parte, o erro não está no código, mas sim na versão do JSON Server. Aparentemente, a consulta por URL com o parâmetro "q" não funciona nas versões atuais do JSON Server, portanto, o resultado de qualquer busca será um array vazio, inclusive, se você abrir um projeto da instrutora, a funcionalidade de busca não vai estar retornando nenhum vídeo. A solução desse problema está em um tópico aberto no fórum desse curso, segui as instruções postadas lá e consegui resolver o problema.

Link do Tópico: https://cursos.alura.com.br/forum/topico-duvida-q-na-url-do-json-server-retorna-um-array-vazio-350537#1452127

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software