Get: Transfer JSON data

Question

I'm trying to POST a JSON object using the fetch method.

According to my understanding, I need to append a stringified object to the body of the request, for example:

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 expect to be able to see the object I'm sending ({a: 1, b: 2}), but this doesn't happen - Chrome Development The tool doesn't even show the JSON as part of the request, which means it's not being sent.

Answer 1

I think your problem is that jsfiddle can only handle form-urlencoded requests. But the correct way is to pass the correct json as the request body:

fetch('https://httpbin.org/post', {
  method: 'POST',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res => res.json())
  .then(res => console.log(res));

Answer 2

Using ES2017’s async/await support, here’s how to POST JSON data:

(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);
})();