2
respuestas

[Duda] Buscando elementos

Hola buenas noches

He finalizado hasta la sección "Creando nuevos elementos" hasta aqui todo me funciona bien, inicie y complete la sección "buscando elementos", pero esta ultima no me funciona, no hay conexion al ejecutar los comandos, al hacer el conole.log no me muestra la promise en la que realiza la busqueda de una palabra, la revise varias veces pero esta igual a lo descrito por Jose Rivera, solicito ayuda para validar porque no corre esta sesion "busqueda" en el proyecto.

Codigo conexinAPI

    const conexion = await fetch ("http://localhost:3001/videos");

    const conexionConvertida = conexion.json();

   // console.log(conexionConvertida)

   return conexionConvertida
}

async function enviarVideo(titulo,descripcion,url,imagen){
    const conexion = await fetch ("http://localhost:3001/videos",{
        method:"POST", 
        headers:{
            "Content-type":"application/json",
        },
        body:JSON.stringify({
            titulo:titulo,
            descripcion:`${descripcion} mil visualizaciones`,
            url:url,
            imagen:imagen

        })
    })

    const conexionConvertida = conexion.json();

    if(!conexion.ok){
        throw new Error("Ha ocurrido un error al enviar el video");
    }

    return conexionConvertida;
}

async function buscarVideos(palabraClave){
    const conexion = await fetch(`http://localhost:3001/videos?q=${palabraClave}`);
    const conexionConvertida = conexion.json();
    console.log(conexionConvertida)
    return conexionConvertida
}

export const conexionAPI={
    listarVideos,enviarVideo,buscarVideos
}

//listarVideos()

Codigo crearvideos

import { conexionAPI } from "./conexionAPI.js";



const formulario = document.querySelector("[data-formulario]");

 async function crearVideo (evento){


    evento.preventDefault();
    const titulo = document.querySelector("[data-titulo]").value;
    const url = document.querySelector("[data-url]").value;
    const imagen = document.querySelector("[data-imagen]").value;

    const descripcion = Math.floor(Math.random*10).toString();

    try{
      await  conexionAPI.enviarVideo(titulo,descripcion,url,imagen);

   window.location.href="../pages/envio-concluido.html";

    }catch(e){
      alert(e)
    }

   

}


formulario.addEventListener("submit",evento=> crearVideo(evento));

Codigo flitraVideo

import {conexionAPI} from "./conexionAPI.js";
import crearCard from "./mostrarVideos.js";

async function filtrarVideo(evento){
    evento.preventDefault();


    const datosDeBusqueda = document.querySelector("[data-busqueda]").value;
    const busqueda = await conexionAPI.buscarVideos(datosDeBusqueda);

    const lista = document.querySelector("[data-lista]");

    while(lista.firstChild){
        lista.removeChild(lista.firstChild);
    }

    busqueda.forEach(video=>lista.appendChild(crearCard(video.titulo,video.descripcion,video.url,video.imagen)));

    if(busqueda.length==0){
        lista.innerHTML=`<h2 class="mensaje__titulo">No fueron encontrados elementos para ${datosDeBusqueda}</h2>`
    }

    //console.log(busqueda)
}

const boton = document.querySelector("[data-boton-busqueda]");

boton.addEventListener("clik",evento=>filtrarVideo(evento))

Codigo mostrarVideo

import { conexionAPI } from "./conexionAPI.js";


const lista = document.querySelector("[data-lista]")

export default function crearCard (titulo,descripcion,url,imagen){
    const video = document.createElement("li");
    video.className="videos__item";
    video.innerHTML=`<iframe width="100%" height="72%" src="${url}"
    title="${titulo}" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
    <div class="descripcion-video">
        <img src="${imagen}" alt="logo canal alura">
        <h3>${titulo}</h3>
        <p>${descripcion}</p>
    </div>`;

    return video;
}

async function listarVideos(){

    try{
        const listatAPI = await conexionAPI.listarVideos()

        listatAPI.forEach(video =>lista.appendChild(crearCard(video.titulo,video.descripcion,video.url,video.imagen)))
    
    }catch{
        lista.innerHTML=`<h2 class="mensaje__titulo"> Ha ocurrido un problema con la conexion</h2>`;
    }


   
}

listarVideos()
2 respuestas

¡Hola Juan!

Al revisar tu código, noté que en el archivo del código que filtra el video hay un pequeño error en el evento del botón de búsqueda. En lugar de "clik", debería ser "click". Este error puede estar causando que la búsqueda no se ejecute correctamente.

Aquí está el código corregido:

const boton = document.querySelector("[data-boton-busqueda]");

boton.addEventListener("click", evento => filtrarVideo(evento));

Te recomendaría corregir ese error y probar nuevamente.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!

Hola Bruno boa noite.

Obrigado pela ajuda, consegui resolver o problema, alem de mudar algo no archivo do json package.

Obrigado novamanete.

Juan Carlos