Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Using Fetch to Post JSON data

In this post you’ll learn how to use the fetch API to POST JSON data to a backend service.

For the purposes of this article we’re going to create a form and submit it and POST that data off to a backend service using fetch.

First, let’s create the form with a name attribute to capture the data we’ll POST:

<form name="fetch">
  <input type="text" name="message" placeholder="Tell me something!">
  <button type="submit">Submit</button>

To get a reference to our form we can use document.forms and reference the name="fetch" we supplied:

const form = document.forms.fetch;

const handleSubmit = (e) => {

form.addEventListener('submit', handleSubmit);

For good measure, we’ve setup an event listener to handle the submit event.

Next, let’s get the JSON payload we want to send to our server.

I’m skipping over the details, but we can combine new FormData with Object.fromEntries to get a serialized object of our form’s values. Our form contains one input with a name="message", hence our message property in the body object.

This means if we supply our (our event target, the form into FormData, it will construct an object of key/value pairs for us to use). Once we’ve got that, stringify the data and it’s ready to send:

const handleSubmit = (e) => {
  const body = JSON.stringify(Object.fromEntries(new FormData(;

  // { message: 'Hey there!' }
JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

Let’s introduce fetch inside a new function to abstract away our logic:

const postForm = (body) => {
  return fetch('//', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'

What’s different from a typical fetch call? You can see that we’ve had to specify a Content-Type header and set the value to application/json. Don’t forget the method: 'POST' or you won’t be posting anything.

I’m accepting body as the function argument, so I’m leaving the variable to be dynamically added and named as body, which is where we supply the data to be sent via fetch.

Now inside our submit function, we can .then() our returned Promise from fetch (yes, we get a Promise back, so we could use .then() or async await - I’ll show you both routes):

const handleSubmit = (e) => {
  const body = JSON.stringify(Object.fromEntries(new FormData(;
    .then(res => res.json())
    .then(data => console.log(data.json));

You’ll note here that our first Promise resolution involves res which we then return res.json(), this is a crucial step that if you miss would result in errors.

Once our res.json() Promise has also been resolved, we can then deal with the raw data we get back - it just so happens that the service URL we’re making the POST to returns an object with .json on it, so we’ll reference it in our console.log.

Using async await and refactoring our handleSubmit function to be async, we could do this:

const handleSubmit = async (e) => {
  const body = JSON.stringify(Object.fromEntries(new FormData(;

  const res = await postForm(body);
  const data = await res.json();


You can see the async/await pattern is nice alongside fetch, where we can treat our asynchronous code as if it was executing synchronously - helping us clean up our code and avoid nesting .then() calls.

If you are serious about your JavaScript skills, your next step is to take a look at my JavaScript courses, they will teach you the full language, the DOM, the advanced stuff and much more!

Check out the live demo on Stackblitz, enter a message and submit to watch the fetch api POST our JSON data:

Thanks for reading! Happy fetching.

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.