formdata.append a combined associative array

Question

I am trying to append the data from two associative arrays I have so I can send it to my php file to then write to the server. I combined my two arrays by doing the following:

var allInputs = {... reqfields,... otherfields};

Up until here I am getting all the values I need and I am seeing them on my console but I don't know how to use the formData.append() for these types of arrays.

Ethan Kelley · Answer 1 · 2019-09-18T04:28:54.663

0

It looks like the signature of formData.append is given by:

formData.append(name, value);

(*you could also add a filename as a third argument)

Assuming the reqFields and the otherFields are objects of the form:

{
  fieldName1: response1,
  fieldName2: response2,
  ...
}

you could use Object.entries to iterate over the properties and call formData.append on each.

    const allInputs = {...requiredFields, ...otherFields};

    for (let [key, value] of Object.entries(allInputs)) {
       formData.append(key, value);
    }

*Note that Object.entries isn't natively supported in Internet Explorer. You can also use Object.keys(allInputs).forEach(...) to iterate over all of the keys in allInputs. There are other ways, too.

edited Sep 18 '19 at 04:28

answered Sep 18 '19 at 04:18

Ethan Kelley

113
1
8

I see, that makes sense , so on the php side decoding the values would be as simple as $dcData = json_decode($_POST['formData']);? Given after I send it through the request = new Request.JSON({... Or is there a certain way of accessing the variables inside the array? – Boxer19 Sep 18 '19 at 19:40
if you've sent along the formData with a post request, you should be able to retrieve individual field values on the php side by doing: `$firstname = $_POST['firstname']; $lastname = $_POST['lastname']; ` – Ethan Kelley Sep 21 '19 at 18:02
Posting formData via an XMLHttpRequest will send the data along as `multipart/form-data`, which should make the individual fields accessible on $_POST. If you're using a library like axios to make the request, you may need to manually set the content-type header: `axios({ method: 'post', url: 'your-url', data: formData, config: { headers: {'Content-Type': 'multipart/form-data' }} })` see: [using axios](https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data) [using json](https://dev.to/dev_nope/catch-and-parse-json-post-data-in-php-1p56) – Ethan Kelley Sep 21 '19 at 18:16
if you're sending json-encoded data, then you will need to use `json_decode`. Check the 'using json' link in the previous comment for an example. Also see: [here](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) and [here](https://stackoverflow.com/questions/813487/how-to-post-json-to-php-with-curl/813512), or use the method that Kaiido suggested. – Ethan Kelley Sep 21 '19 at 18:29

score -1 · Accepted Answer · answered Sep 18 '19 at 04:33

Append this object to your FormData as a JSON string:

const reqfields = { a: 1, b: 2 };
const otherfields = { c: 3 };
const allInputs = {... reqfields,... otherfields};

const formdata = new FormData();
formdata.append( 'your_field_key', JSON.stringify(allInputs) );

/*
// then you can send it to your server
fetch( server_url, {
  method: "POST",
  body: formdata
 });
*/
// for SO demo we just log the request's body as text
new Response( formdata ).text()
  .then( console.log );

And then on your server side you can retrieve it from the multipart data using the field key you used and simply parse it:

<?php 

  if ( isset($_POST["your_field_key"]) ) {
    $fields = json_decode($_POST["your_field_key"]);
    ...

formdata.append a combined associative array

2 Answers2