Send non-stringified objects with fetch - ecmascript-6

Question

I'm using the fetch-api for the first time and having trouble passing a non-stringified JSON objects to the server.
Basically I want to achieve the same behavior as this:
$.post(url, {"test": "test"}, function(response) {
console.log(response);
});
The fetch method is communicating with an web API which is unaccessable for me and expects a plain JSON object.
Normally I would just use FormData to pass data to the server, however the JSON will be transformed to a string [Object object]:
fetch(url, {
method: 'POST',
body: {"test": "test"}
})
.then(data => data.json())
.then(json => console.log(json))
.catch(e => console.error(e));
The body request seems to be empty when using $_POST (which is what the API is using), though gives the right value when using file_get_contents('php://input).
I though this had something to do with the wrong header given to the request. So I tried to add the header Ajax post uses: content-type:multipart/form-data;. However, this also did not get any value.
I was wondering if this was explicity intentional to not use plain JSON object to give as data, or that I'm simply missing something?
This does work, but is not allowed as it is a stringify version of the JSON object:
var formData = new FormData();
formData.append('data', JSON.stringify(data));
fetch(url, {
method: 'POST',
body: formData
})
.then(data => data.json())
.then(json => console.log(json))
.catch(e => console.error(e));

Answer 1

Let's say your data is inside a variable var data = { a: "some data", b: 123 }. If you want your code in PHP to access these fields this way:
$_POST["a"] == "some data";
$_POST["b"] == 123;
Then you need to send the data in the formData format this way:
var fdata = new FormData();
fdata.append('a', 'some data');
fdata.append('b', '123');
Now you can send that data and PHP will have access to separated fields a and b but notice b will be a string, not a number.
What if you want to send an array. Let's say { c: ['hello', 'world', '!'] }? You must follow PHP name conventions and add the same name multiple times:
var fdata = new FormData();
fdata.append('c[]', 'hello');
fdata.append('c[]', 'world');
fdata.append('c[]', '!');
After setting the form data instance, you can use it as the body of the request.

Answer 2

So firstly, I need to post to the POST-protocol, which is used by $_POST. I do this by adding a header of application/x-www-form-urlencoded (which is the protocol used by $_POST, as described in the docs) to the fetch post request:
fetch(url, {
headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to
...
Now the way $.post actually sends data is by creating a serialized string (eg: a%5Bone%5D=1) of the given object. To transform an object to a serialized string, you can use $.param:
fetch(url, {
headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to
method: 'POST',
body: $.param(data)
})
This will make you able to retreive data from $_POST like you would do with a simple $.post.