CODEWITHSUNDEEP
javascriptreactjsfetchjson-server
DGB
DGB

Reputation: 1342

Using fetch for a POST request to add data to JSON server database

Trying to add something new to my fake database using JSON server.

The problem is that when I run the function the input information is not added. However a id in my database is created but no body content.

My code:

// newName + newNumber are values from user input
 const contactObject = {
        name: newName,
        number: newNumber,
        date: new Date().toISOString(),
        id: persons.length + 1,
      }
      console.log(JSON.stringify(contactObject))

      fetch('http://localhost:3001/phonebook', {
        method: 'POST',
        body: JSON.stringify(contactObject),
      })

The console log from above shows {"name":"test","number":"12345","date":"2020-10-29T01:50:17.345Z","id":9}

My JSON database shows

// hardcoded data
 {
      "name": "Mary Poppendieck",
      "number": "39-23-6423122",
      "id": 4
    },
// data from running my create new function
    {
      "id": 5
    }

I expected data would include name, number, data, ID. But instead only get an ID.

Not sure what i'm doing here as its my first time doing any CRUD operations.

Upvotes: 0

Views: 1433

Answers (1)

DGB
DGB

Reputation: 1342

Need to add the following to my functionality.

 headers: {
          "Content-type": "application/json; charset=UTF-8"
        }

Full code:

fetch('http://localhost:3001/phonebook', {
        method: 'POST',
        body: JSON.stringify(contactObject),
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        }
      })

Upvotes: 1

Related Questions