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