Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Página não carrega os vídeos, após código da aula forEach() do módulo 2

Fiz o código basicamente como ela fez e não está aparecendo os vídeos igual apareceu na aula. Pelo console do Chrome aparece uma referência ao um erro 404 Print do erro no Chrome

Pelo terminal, aparece erros semelhantes http://localhost:3000/videoGET /video 404 9.030 ms - 2 GET /video 404 1.558 ms - 2 GET /video 404 13.540 ms - 2 GET /video 404 13.050 ms - 2 GET /video 404 12.292 ms - 2 GET /video 404 13.830 ms - 2 GET /video 404 13.649 ms - 2 GET /video 404 13.454 ms - 2 GET /video 404 0.689 ms - 2 GET /video 404 7.452 ms - 2 GET /video 404 10.208 ms - 2 GET /video 404 7.197 ms - 2 GET /video 404 32.463 ms - 2 GET /video 404 14.610 ms - 2 GET /video 404 16.608 ms - 2 GET /video 404 10.300 ms - 2 GET /video 404 5.617 ms - 2 GET /video 404 3.575 ms - 2 GET /video 404 12.450 ms - 2 GET /video 404 6.261 ms - 2 GET /video 404 16.701 ms - 2 GET /video 404 13.638 ms - 2

Meus códigos:

//ConectaAPI.JS

async function listaVideosZ(){
    const conexao = await fetch ('http://localhost:3000/video');
    const conexaoConvertida = await conexao.json();
    
    return conexaoConvertida;
}

export const conectaAPI = {
    listaVideosZ
}

//mostraVideos.js

import { conectaAPI } from "./conectaAPI";

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

function constroiCard(titulo, descricao, url, imagem) {
    const video = document.createElement('li');
    video.className = "videos__item";
    video.innerHTML = ` <li class="videos__item">
    <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="descricao-video">
        <img src="${imagem}" alt="logo canal alura">
        <h3>${titulo}</h3>
        <p>${descricao}</p>
    </div>
</li>`

    return video;
}

async function listaVideos(){
    const listaAPI = await conectaAPI.listaVideos();
    listaAPI.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)));

}

listaVideos();

Alguém tem alguma ideia do que pode ser?

4 respostas
solução!

Olá você esquece do '.js' import { conectaAPI } from "./conectaAPI";

para import { conectaAPI } from "./conectaAPI.js";

Obrigada, foi autocompletar do emmet. Mas ainda assim aparenta não funcionar.

Agora foi, não entendi direito porque não tinha ido, talvez algum case sensitive que não reparei, mas agora foi

ver agora

function constroiCard(titulo, descricao, 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="descricao-video">
    <img src="${imagem}" alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
</div>
`