1
resposta

[Bug] os videos não aparecem

conexaoApi

sync function listaVideos(){
    const conexao = await fetch('http://localhost:3000/videos')
    const conexaoConvertida = await conexao.json()

    return conexaoConvertida
}

export const conectaApi = {
    listaVideos
}

mostrarVideos

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

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

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>`

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();

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Boa noite,

No trecho está faltando um a no async.

***sync*** function listaVideos(){
    const conexao = await fetch('http://localhost:3000/videos')
    const conexaoConvertida = await conexao.json()

    return conexaoConvertida
}

export const conectaApi = {
    listaVideos
}

Coloque desta forma:

async function listaVideos(){
    const conexao = await fetch('http://localhost:3000/videos')
    const conexaoConvertida = await conexao.json()

    return conexaoConvertida
}

export const conectaApi = {
    listaVideos
}

Ver se funciona agora, isso no conexaoApi