Fetch: POST JSON data

I’m trying to POST a JSON object using fetch.

From what I can understand, I need to attach a stringified object to the body of the request, e.g.:

fetch("/echo/json/",
{
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })

When using jsfiddle’s JSON echo I’d expect to see the object I’ve sent ({a: 1, b: 2}) back, but this does not happen – chrome devtools doesn’t even show the JSON as part of the request, which means that it’s not being sent.

Answer

With ES2017 async/await support, this is how to POST a JSON payload:

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

Can’t use ES2017? See @vp_art’s answer using promises

The question however is asking for an issue caused by a long since fixed chrome bug.
Original answer follows.

chrome devtools doesn’t even show the JSON as part of the request

This is the real issue here, and it’s a bug with chrome devtools, fixed in Chrome 46.

That code works fine – it is POSTing the JSON correctly, it just cannot be seen.

I’d expect to see the object I’ve sent back

that’s not working because that is not the correct format for JSfiddle’s echo.

The correct code is:

var payload = {
    a: 1,
    b: 2
};

var data = new FormData();
data.append( "json", JSON.stringify( payload ) );

fetch("/echo/json/",
{
    method: "POST",
    body: data
})
.then(function(res){ return res.json(); })
.then(function(data){ alert( JSON.stringify( data ) ) })

For endpoints accepting JSON payloads, the original code is correct