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

[Dúvida] ERRO

Na hora de enviar o formulário esta dando esse erro

conectaApi.js:21 Uncaught (in promise) ReferenceError: json is not defined
    at Object.criaVideo (conectaApi.js:21:11)
    at criarVideo (criarVideo.js:22:20)
    at HTMLFormElement.<anonymous> (criarVideo.js:29:51)

segue o código :

    conectaApi.js: 
    
    // função assíncrona
    // await serve para esperar a promise ser resolvida para realizar a função
    async function listaVideos() {
      // conectando com a API(pegando a API)
      const conexao = await fetch("http://localhost:3000/videos") // sem declarar nada, considera method get(pegar dados da api)

      // convertendo a promise para json
      const conexaoConvertida = await conexao.json();

      // retornando o resultado
      return conexaoConvertida
    }

    async function criaVideo(titulo, descricao, url, imagem) {
      const conexao = await fetch("http://localhost:3000/videos", {
        method:"POST", // usando o method post, enviar dados pra api
        headers: { // precisa ter logo após o method post
          "Content-Type": "application/json" // informando qual tipo de arquivo e informação irá enviar
        },
        // precisa ter logo após o method post
        body: json.stringify({ // colocando qual informações serão enviadas e o stringfy coloca tudo que estamos enviando como string, tudo que enviamos para a API precisa ser considerado uma string
          titulo: titulo,
          descricao: `${descricao} mil visualizações`,
          url: url,
          imagem: imagem
        })
      });

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

    // exportando uma variável com o retorno da função
    export const conectaApi = {
      // exportando as functions
      listaVideos, 
      criaVideo
    }

criarVideo.js:

    // importando a variável conectaApi, precisa colocar o from 'diretório'
    import { conectaApi } from "./conectaApi.js";

    // pegando o formulario
    const formulario = document.querySelector("[data-formulario]")

    // adicionando o video colocado pelo usuário
    async function criarVideo(evento) {
      // o evento submit tem como padrão dar reload na pagina após enviar informação, colocamos preventDefault() para tirar o reload da pagina após o envio
      evento.preventDefault();

      // pegando o valor que o usuário colocar nesses campos de digitação
      const imagem = document.querySelector("[data-imagem]").value;
      const url = document.querySelector("[data-url]").value;
      const titulo = document.querySelector("[data-titulo]").value;

      // math.floor usado para arredondar o numero aleatório enviado pelo math.random, o math.random da um numero aleatório de 0 a 10
      const descricao = Math.floor(Math.random() * 10).toString()

      // pegando o import e chamando a function criaVideo e passando os parâmetros pego
      // await para esperar a promessa ser resolvida para enviar os dados
      await conectaApi.criaVideo(titulo, descricao, url, imagem);

      // redirecionando o usuário para outra página após ter enviado os dados com sucesso
      window.location.href = "../pages/envio-concluido.html";
    }

    // quando enviar o formulário manda o evento(informações)
    formulario.addEventListener('submit', (evento) => criarVideo(evento))
1 resposta
solução!

Olá, Raí! Tudo bem?

Pelo erro que você está recebendo, parece que há um problema na linha 21 do arquivo conectaApi.js. O erro diz que json não está definido. Isso pode ocorrer porque você está usando json.stringify em vez de JSON.stringify. O correto é utilizar JSON.stringify({ ... }), em maiúsculo, para transformar o objeto em uma string no formato JSON.

Portanto, o trecho do código deve ser corrigido para o seguinte:

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({ // Correção aqui, "JSON" com letras maiúsculas
      titulo: titulo,
      descricao: `${descricao} mil visualizações`,
      url: url,
      imagem: imagem
    })
  });

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

Além disso, na linha 14 do arquivo criarVideo.js, você está redirecionando o usuário para a página .. Para redirecioná-lo para a página envio-concluido.html, você precisa alterar a linha 14 para:

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

Depois de fazer essas alterações, tente enviar o formulário novamente e veja se o erro desaparece.

Espero que essa explicação tenha sido clara e que tenha te ajudado a resolver o problema. Se tiver mais alguma dúvida ou precisar de mais assistência, fique à vontade para perguntar.

Espero que tenha te ajudado, abraços bons estudos!