Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Criando requisições - ForEach. Vídeos não carregam! Nada carrega!!!

Referente ao curso JavaScript: criando requisições, no capítulo Exibindo elementos e atividade forEach()

por Ana Paula Aquino Dos Santos
| 44.9k xp | 34 posts

html

<body>

    <header>

        <nav class="cabecalho">
            <a class="logo" href="./index.html"></a>

            <div class="cabecalho__pesquisar">

                <input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
                <button class="pesquisar__botao"></button>

            </div>

            <div class="cabecalho__icones">
                <a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
            </div>
        </nav>

    </header>

    <ul class="videos__container" alt="videos alura" data-lista></ul>

    <script src="./js/mostrarVideos.js" type="module"></script>
    
</body>

</html>

Api

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

export const conectaApi = {
    listaVideos
}

Api

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;
}
2 respostas
solução!
por Mike de Sousa
| 844.3k xp | 1398 posts
Alura Scuba Team Suporte Educacional

Olá, Ana. Tudo bem?

Existem dois ajustes necessário no seu código!

1 - Primeiro você precisa fazer o ajuste da url que está sendo usada para a requisição, no momento ela está assim:

const conexao = await fetch("http://localhost:3000");

Mas faltou o endpoint na url, dessa forma:

const conexao = await fetch("http://localhost:3000/videos");

2 - Após isso, corrija o query selector usado para receber a lista de vídeos, no momento ele está assim:

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

Você precisa remover o ponto e inserir um hífen, dessa forma:

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

Isso deve ser o suficiente para que seu projeto funcione normalmente.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Ana Paula Aquino Dos Santos
| 44.9k xp | 34 posts

Solucionado. Muito obrigada!!!