[Dúvida] problema no formulario do pensamento | JavaScript: implementando CRUD com requisições HTTP

Boa tarde. o conteúdo adicionado no formulário não está indo para o pensamento. tentei utilizar o debugger para ver se estava entrando na constante e sim, estava, mas ele vai para outra areá que não localizei muito bem e de lá, muito provavelmente, ele perde conteúdo

essa é a função:

async function manipulateSubmit(event) {
    event.preventDefault();
    debugger
    const id = document.querySelector('#pensamento-id').value
    const content = document.querySelector('#pensamento-conteudo').value
    const autoria = document.querySelector('#pensamento-autoria').value

    try {
        await api.salveThought({ content, autoria })
        ui.renderizeThought()
    } catch {
        alert('Ocorreu um erro ao salvar os pensamentos')
    }
}

caso precise de mais informações tem o link do GitHub: https://github.com/BirdMelo/Memoteca

Muito obrigado pela atenção

Olá, João. Como vai?

O que acontece é que na estrutura para renderizar o pensamento, você chama o conteúdo como thought.conteudo. O que funciona bem com os pensamentos "chumbados" no JSON. No entanto, ao salvar pensamentos novos, você nomeia o conteúdo como content:

const content = document.querySelector('#pensamento-conteudo').value

await api.salveThought({ content, autoria })

E isso "conflita" com a função que renderiza os pensamentos, já que ela espera por thought.conteudo, mas o valor no JSON é thought.content, você pode notar isso no arquivo db.json:

{
  "id": "4d2e",
  "conteudo": "Se eu for aí e achar, eu esfrego na sua cara!", <-- Aqui está como conteúdo
  "autoria": "Mãe"
},
{
  "id": "35fa",
  "content": "          Deu certo?",  <-- Aqui está como content
  "autoria": "João Pedro de Melo"
},

Você pode fazer uma simples mudança na função manipulateSubmit, e assim os nomes ficarão como esperado no momento de renderizar os pensamentos em tela:

async function manipulateSubmit(event) {
    event.preventDefault();
    const id = document.querySelector('#pensamento-id').value
    const conteudo = document.querySelector('#pensamento-conteudo').value
    const autoria = document.querySelector('#pensamento-autoria').value

    try {
        await api.salveThought({ conteudo, autoria })
        ui.renderizeThought()
    } catch {
        alert('Ocorreu um erro ao salvar os pensamentos')
    }
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Mergulhe em programação