6
respostas

problemas com o foreach

Esta dando erro na linha do foreach porem nao consigo resolver!

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

Olá Gabriel, tudo bem?

Pelo que pude perceber, o erro que está ocorrendo no seu código está na função listaVideos(), mais precisamente no uso do método foreach. O correto seria utilizar forEach com letra maiúscula.

Altere a linha listaAPI.foreach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem))) para listaAPI.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem))) e veja se o erro persiste.

Espero ter ajudado e bons estudos!

Não tem alteração, nao sei oq acontece ja tinha feito isso, e continua dando o erro de listaAPI.forEach its not a function mas nao sei como que nao pode ser uma função sendo o array o listaAPI e tudo estando escrito certo

Eu analisei o seu código e percebi que tem algumas coisas para ajustar.

No import você está chamando o "conectaApi" porém com o nome "API" tudo maiúscula e precisa estar correta "Api" dessa forma conectaApi tanto no caminho quanto no nome da variável, veja: import { conectaApi } from "./conectaApi.js";

Outra coisa na função listaVideos, na linha da const listaAPI você esqueceu de fechar os parênteses na função listaVideos, veja corrigido: const listaAPI = await conectaApi.listaVideos();

Por último no forEach você escreveu a palavra foreach tudo minúscula sendo que a letra "F" precisa ser maiúscula, veja corrigido: listaAPI.forEach.

CORREÇÕES APLICADAS:

Import:

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

FUNÇÃO listaVideos:

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

Espero ter ajudado. Valeu.

opa, entao na import estava assim pois tinha colocado conectaAPI mesmo no nome, mas mudei para ver se interferia em algo, mas não fazendo isso apenas aparecem outros problemas relacioandos. Vou enviar aqui o conectaApi e o msotraVideos ambos os codigos se puder ver e me dizer se a algo errado agradeço pois os erros continuam

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

export const conectaApi = {
    listaVideos
}

Essa parte está correta, só precisa ajustar lá então o forEach e os parênteses no final da função conectaApi.listaVideos(); igual eu falei na resposta anterior. Eu corrigi isso e funcionou seu código.

po entao deve ser aqui no meu studio o problema pq nao vair por nda mas obrigado pela ajuda