Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

[Duda] Errores en consola

Referente al curso JavaScript: creando solicitudes, en el capítulo Mostrando elementos y actividad forEach()

por Cesar Josue Caal Morales
| 43k xp | 12 posts

La funcionalidad del código está bien pero cuando reviso la consola me generan muchos errores como los de la imagen, quisiera saber si es por el código que realice y si como puedo solucionarlos Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad En esta imagen ahora me salen miles de errores diferentes Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 

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

//objeto ul donde se va mostrar 
const lista = document.querySelector("[data-lista]");

//funcion para crear los componentes li
function crearCard(title,descripcion,url,imagen){
    
    const video = document.createElement("li");
    //agregar clase al elemento li
    video.className="videos__item";
    //estructura de la card o elemento li
    video.innerHTML=`<iframe width="100%" height="72%" src="${url}"
    title="${title}" 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>${title}</h3>
        <p>${descripcion}</p>
    </div>`

    //retornar el video
    return video;

}

//funcion asincrona
//debe ser asincrona ya que la funcion a la que llamamos es asincrona tambien 
async function listarVideos(){
    //
    const listaAPI = await conexionAPI.listarVideos();
    //recorrido de listarvideos
    //anexamos un hijo  con diferentes elementos 
    listaAPI.forEach(video =>lista.appendChild(crearCard(video.title,video.descripcion,video.url, video.imagen)) );
}

listarVideos();
4 respuestas
por Carlos Guajardo Cornejo
| 53.3k xp | 22 posts

El error 401, como se puede ver en la consola, es porque no tienes autorización para hacer una petición a esa url. seguramente el endopint requiere autenticación y no se la pasaste o se la pasaste mal, revisa que le estes pasando todo los datos y en la cabecera (headers) debería ir tu key de autenticación (API_KEY, Token o lo que sea que el endpoint necesite).

por Cesar Josue Caal Morales
| 43k xp | 12 posts

Como podría obtenerlo?, ya que en el curso se está utilizando node js y se ejecuta de manera local y se utiliza el puerto 3001, no encuentro algo sobre una api_key o token para colocarlo, agrego el código de conexión.

async function listarVideos(){
    //variable de conexion
    const conexion = await fetch("http://localhost:3001/videos");
    //convertimos la informacion en formato json.
    const conexionCovertida = conexion.json();
    // console.log(conexionCovertida);
    //retornar conexion en formato json
    return conexionCovertida;
}
//exportar modulo 
export const conexionAPI = {
    //agregamos lo que se va exportar.
    listarVideos
}


//llamar a la funcion listar videos para que se ejecute la funcion
listarVideos();
solución!
por Carlos Guajardo Cornejo
| 53.3k xp | 22 posts

tienes que revisar si en algun punto de tu codigo se está realizando alguna petición a play.google.com/log, de lo contrario ese error podría ser producudo por alguna extensión de chrome.

prueba tu código usando chrome en modo incognito para que no haya tanto ruido de las extensiones, si es que ese fuera el caso.

por Cesar Josue Caal Morales
| 43k xp | 12 posts

Para dar por cerrada la duda, simplemente cerré el navegador y ejecute nuevamente el json en el mismo puerto, espere unos minutos y corrí la página con el live server, no sé qué cambio ya que no cambie nada del código solo corregí una línea que referenciaba a la imagen del logo en la petición GET. no se si eso era el problema, ahora solo tengo advertencias de cookies por mi navegador, gracias por los consejos me ayudaron a entender mejor el problema y el funcionamiento del código.