Entrar Ainda não tem acesso?
1
resposta

[Bug] Não estou conseguindo imprimir os vídeos na tela

Referente ao curso JavaScript: criando requisições, no capítulo Exibindo elementos e atividade Crescendo a lista

por Selly Vanessa Lima do Nascimento
| 144.5k xp | 16 posts

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

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


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

function constroiCard (titulo, imagem, url, descricao) {
    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}">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
</div>`;

return video;

}

async function listaVideo() {
    const listaApi = await conectaApi.listaDeVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
}

listaVideo();

async function listaDeVideos() {
    const conexao = await fetch('http://localhost:3000/videos');
    const conexaoConvertida = await conexao.json();
    console.log(conexaoConvertida);
}

listaDeVideos();

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

1 resposta
por Izequias Queiroz Ferreira
| 66.9k xp | 22 posts
Analista de Sistemas JR

Boa noite, Selly! na chamada da função listaDeVideos no final do código, você está fazendo essa chamada, mas a função não faz nada além de fazer uma requisição à API e exibir o resultado no console. Para exibir os vídeos, você precisa modificar a função listaDeVideos para que ela retorne os dados para a função listaVideo e, em seguida, adicionar os elementos à lista

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

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

function constroiCard (titulo, imagem, url, descricao) {
    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}">
        <h3>${titulo}</h3>
        <p>${descricao}</p>
    </div>`;

    return video;
}

async function listaVideo() {
    const listaApi = await conectaApi.listaDeVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.imagem, elemento.url, elemento.descricao)))
}

listaVideo();