How to make a post request with JSON data in application/x-www-form-urlencoded

let data = {
    a: "some data",
    b: 33,
    c: [
        {
            name: "XYZ",
            other: true
        },
        {
            name: "ABC",
            other: true
        }
    ]
    d: {
        something: true
    }
}

How to make a POST request with above JSON data, as content-type application/x-www-form-urlencoded using fetch api?

[teameh]

That makes sense.

Too bad we need yet another polyfill for that to work…

import URLSearchParams from 'url-search-params';

const searchParams = new URLSearchParams();
for (const prop in params) {
  searchParams.set(prop, params[prop]);
}


fetch(url, {
  method: 'POST',
  body: searchParams
})

And that only works for flat objects…

And than again, when the data is that simple, a manual conversion isn’t that hard as well.

const searchParams = Object.keys(params).map((key) => {
  return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: searchParams
})

Thanks for the quick reply and the insight!

[teameh]

@dgraham using

fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new FormData(postData)
})

results in this formData why I try it…

------WebKitFormBoundarybJk1vnBHdSvQEKdD--