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

[Bug] Erro ao mostrar vídeo no site

*Esse NaN está aparecendo na minha página ao tentar inserir o vídeo pelo JS. *

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

O que pode ser?

*Os meus códigos: *

Arquivo: conectaApi.js

    async function listaVideos(){
        const url = "http://localhost:3000/videos"
        const apiConvertida = await fetch(url).then(res => res.json())

        return apiConvertida
    }

    export const conectaApi = {
        listaVideos
    }

Arquivo: mostrarVideos.js

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

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

    function constroiCard (url,titulo,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;web-share" allowfullscreen>
                </iframe>
                <div class="descricao-video">
                    <h3>${titulo}</h3>
                    <p>${descricao}</p>
                </div>
            `

            return video
    }

    async function listaVideos(){
        const listaApi = await conectaApi.listaVideos()

        listaApi.forEach(e => 
            lista.appendChild(constroiCard(e.url, e.titulo, e.descricao))
        )

    }

    listaVideos();
2 respostas

Olá Weverton, tudo bem?

Pelo que pude ver em seu código, o erro NaN pode estar ocorrendo devido a algum problema na conversão dos dados da API. Sugiro que você verifique se os dados estão sendo retornados corretamente e se estão sendo tratados da maneira correta no arquivo mostrarVideos.js.

Você pode testar o retorno com o console.log.

Espero ter ajudado e bons estudos!

solução!

O problema era esse:

 video.innerHTML =+

Falta de atenção as vezes por consequência de muitas horas programando zZz