Erro ao enviar cadastro | JS na web: CRUD com JavaScript assíncrono

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso JS na web: CRUD com JavaScript assíncrono, no capítulo Criar e remover clientes e atividade Criando um cliente

por MARIANA LOUREIRO AGUIAR DA SILVA

| 42.5k xp | 2 posts

Olá Esta dando erro no momento de cadastrar e não encontro o erro no código:

Uncaught TypeError: JSON.stringfy is not a function
    at Object.criaCliente (cliente-service.js:14:20)
    at HTMLFormElement.<anonymous> (cadastraClientes-controller.js:10:20)
criaCliente @ cliente-service.js:14
(anonymous) @ cadastraClientes-controller.js:10

cliente-service.js:

const listaClientes = () =>{
return fetch(`http://localhost:3000/profile`)
.then(resposta =>{
return resposta.json()
})
}

const criaCliente = (nome, email) =>{
return fetch(`http://localhost:3000/profile`, {
    method: 'POST',
    headers:{
        'Content-Type' : 'application/json'
    },
    body: JSON.stringfy ({
      nome: nome,
      email: email  
    })
    .then(resposta => {
        return resposta.body
    })

})
}

export const clienteService = {
listaClientes,
criaCliente
}

cadastraClientes-controller.js:


import { clienteService} from "../service/cliente-service.js"

const formulario = document.querySelector('[data-form]')

formulario.addEventListener('submit', (evento) => {
    evento.preventDefault()
    const nome = evento.target.querySelector('[data-nome]').value
    const email = evento.target.querySelector('[data-email]').value

    clienteService.criaCliente(nome, email)
    .then(()=>{
        window.location.href  = '../telas/cadastro_concluido.html'
    })
})

Conseguem me ajudar?

3 respostas

solução!

por RODRIGO SILVA HARDER

| 1892.4k xp | 4137 posts

Alura Scuba Team Monitor de Fórum Ops

24/05/2023

Oi, Mariana, tudo bem?

A mensagem de erro "JSON.stringfy is not a function" diz que a propriedade JSON.stringfy não existe. O problema é causado deviso a falta da letra "i" na palavra "stringfy". Podemos corrigir isso adicionando a letra de modo que fique assim: "stringify".

O codigo corrigido ficaria assim:

const criaCliente = (nome, email) =>{
return fetch(`http://localhost:3000/profile`, {
    method: 'POST',
    headers:{
        'Content-Type' : 'application/json'
    },
    body: JSON.stringify ({
      nome: nome,
      email: email  
    })
    .then(resposta => {
        return resposta.body
    })

})
}

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

por MARIANA LOUREIRO AGUIAR DA SILVA

| 42.5k xp | 2 posts

24/05/2023

Boa tarde, Rodrigo!

Muito Obrigada pela ajuda, fiz a correção e consegui solucionar um outro erro tbm

por RODRIGO SILVA HARDER

| 1892.4k xp | 4137 posts

Alura Scuba Team Monitor de Fórum Ops

24/05/2023

Oi, Mariana,

Fico feliz que conseguiu solucionar o outo erro que estava tendo. Contudo, deixo abaixo algumas observações que podem ajudar a compreender melhor o motivo do erro.

A mensagem de erro ocorre, pois o método fetch() retorna uma promessa (Promise), mas você está tentando encadear o .then() diretamente no resultado de JSON.stringify(), o que não é possível.

Para corrigir isso, você pode encadear o .then() após a chamada de fetch(). Ficaria assim:

const criaCliente = (nome, email) => {
  return fetch(`http://localhost:3000/profile`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      nome: nome,
      email: email  
    })
  })
  .then(resposta => resposta.json())
  .then(resposta => {
    return resposta;
  });
}

Nesse código, primeiro chamamos resposta.json() para converter a resposta em formato JSON. Em seguida, encadeamos outro .then() para manipular o resultado convertido.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!