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

Erro no forEach

Boa tarde tudo bem?

esta dando erro na função do forEach.

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();
async function listaVideos() {
    const conexao = await fetch("http://localhost:3000");

    const conexaoConvertida = await conexao.json;


    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos
}

Vasculhei tudo, li outros topicos aqui no forum, e nao consigo achar o erro.

esse é o erro que aparece no console:

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

2 respostas
solução!

Oii, Cláudia. Tudo bem?

Vamos dar uma olhada no trecho do código onde você busca os dados da API:

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

Aqui está o problema: conexao.json deve ser chamado como uma função (conexao.json()). Então, a correção seria:

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

Com essa correção, conexaoConvertida deve ser um array, assumindo que a resposta da API é uma lista de vídeos. Isso deve resolver o erro que você está enfrentando com o forEach.

Outra coisa, na aula a instrutora usa esse endereço: "http://localhost:3000/videos", para que fique igual ao dela surgiro seguir o mesmo padrão.

E você sempre pode conferir o código no GitHub também.

Um abraço e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

bons estudos

Resolvido!!!

Muuuuito obrigada mesmo, estava batendo cabeça. kkkkk