Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[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

1 respuesta
solución!

¡Hola! Parece que estás teniendo un problema con tu código. El error que estás viendo en la imagen parece estar relacionado con el uso incorrecto de la función json. En lugar de conexion.json, deberías usar conexion.json(), ya que json es un método que necesita ser invocado.

pude notar que en FiltrarVideos la constante const lista = document.querySelector**('[data-lista]'**); utiliza comillas simples para el atributo data-lista. Sin embargo, en MostrarVideos este mismo atributo se encuentra escrito de forma diferente. Pequeños cambios en la sintaxis pueden llevar a errores, por lo que es importante mantener la consistencia. Además, revisa esta línea: datosDeBusqueda = document.querySelector**('[data-busqueda]'**).value;

Espero que estas correcciones te ayuden a solucionar tu problema. Gracias por escribir el código de forma clara! Esto facilita mucho poder ayudarte. Si necesitas más ayuda, no dudes en preguntar. ¡Buena suerte!

Si esta respuesta te ayudó a solucionar tu duda, por favor no olvides marcarla como solucionada ✓. Esto ayudará a otros estudiantes que puedan tener la misma pregunta.