Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

[Duda] Realizar filtrado - error

Buenas noches, estuve realizando el código durante la clase, sin embargo me sale el siguiente el siguiente error: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Adjunto el código de la función "buscarVideo" en el archivo "conexionAPI"

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

Adjunto el código del archivo "filtrarVideo"

import { conexionAPI } from "./conexionAPI.js"; //utiliza todos los elementos que hayan sido indicados en el archivo
import crearCard from "./mostrarVideos.js"; //indica que sólo se va a usar la funcón exportada


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

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

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

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

    //console.log(busqueda);

}

const boton = document.querySelector('[data-boton-busqueda]');
boton.addEventListener('click', evento => filtrarVideo(evento));

Adjunto el código del archivo "mostrarVideos"

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

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

export default function crearCard(titulo,descripcion,url,imagem){
    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="${imagem}">
        <h3>${titulo}</h3>
        <p>${descripcion}</p>
    </div>`;

    return video;
}

async function listarVideos(){
        const listaAPI = await conexionAPI.listarVideos()
     listaAPI.forEach(video=>lista.appendChild(crearCard(video.titulo,video.descripcion,video.url,video.imagem)))
   
}

listarVideos()

Estuve buscando el error por mi cuenta, pero decidí rendirme al no poder verlo