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

Persisten Errores de Consola

Hola como estan? Yo abri mi servidor y mi pagina en la pantalla de incognito como se indicaba en la consulta anterior y aun asi me sale este error y no se cargan todos los videos. Vuelvo a levantar servidor de node y de live server y nada. Les agradezco su ayuda.

Aca el codigo del archivo mostrarVideo.js

//Importacion del archivo que hace la conexion API
import { conexionAPI } from "./conexionAPI.js";

//Identificando el elemento HTML
const lista = document.querySelector('[data-lista]');

//Creacion de los elementos <li/> a mostrar dentro del <ul/>
function crearCard(titulo, descripcion, url, imagen){

    //Creando el elemento
    const video = document.createElement('li');
    //Agregando el tipo de la clase que tienen los otros <li/>
    video.className = "videos_item";
    //Agregando el contenido al HTML
    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(){
    const listaAPI = await conexionAPI.listarVideos();

    listaAPI.array.forEach( element => {
        //Agregando videos a la lista
        lista.appendChild(crearCard(element.titulo, element.descripcion, element.url, element.imagen))
    });
}

y tambien en el index.html antes de cerrar la etiqueta body esta que el archivo js es de tipo "module"

HTML )

Aca el error que sale por consola en incognito

Error

1 respuesta
solución!

Buenas tardes ya solucione mi error lo que me estaba pasando era que cuando intentaba utilizar el forEach, lo tenia de esta forma

async function listarVideos(){
    const listaAPI = await conexionAPI.listarVideos();

    listaAPI.array.forEach( element => {
        //Agregando videos a la lista
        lista.appendChild(crearCard(element.titulo, element.descripcion, element.url, element.imagem))
    });
}

y el error era que la propiedad array no existe en el objeto listaAPI. Aparte use un try-catch para capturar cualquier excepción que se pudiera dar al momento de intentar acceder a la API. Aca el codigo completo de mi funcion

async function listarVideos(){
    try {
        // Realizar la solicitud a la API
        const listaAPI = await conexionAPI.listarVideos();

        // Iterar sobre la lista de videos y agregarlos a la lista
        listaAPI.forEach(element => {
            lista.appendChild(crearCard(element.titulo, element.descripcion, element.url, element.imagem));
        });
    } catch (error) {
        console.error('Error al listar videos:', error);
    }
}