Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Descrição está "undefined"

Tudo funciona, mas a descrição do vídeo está "undefined", no arquivo db.json, ele vai correto, está gerando o número e a string, mas na tela não mostra.

conectaApi.js

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

}

async function criaVideo(titulo, descricao, url, imagem) {
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            dascricao: `${descricao} mil visualizações`,
            url: url,
            imagem: imagem
        })

    });

    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos,
    criaVideo
}

mostrarVideos.js

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

criarVideo.js

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

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

async function criarVideo(evento) {
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random() * 10).toString();

    await conectaApi.criaVideo(titulo, descricao, url, imagem);

    window.location.href = "../pages/envio-concluido.html";
}

formulario.addEventListener("submit", evento => criarVideo(evento));
1 resposta
solução!

Olá, Leandro!

Pelo código que você compartilhou, parece que o problema está na digitação da palavra "descricao" no arquivo conectaApi.js. Na função criaVideo, você escreveu "dascricao" em vez de "descricao". Por isso, a descrição está sendo enviada como "undefined" para o servidor.

Para corrigir o problema, você precisa alterar essa linha:

dascricao: `${descricao} mil visualizações`,

para:

descricao: `${descricao} mil visualizações`,

Dessa forma, a descrição será enviada corretamente para o servidor e será exibida corretamente na tela.

Espero ter ajudado e bons estudos!