Convert Javascript Object into FormData for POST request

Total
0
Shares
convert javascript object to formdata for post request

There are many ways to send data from html form to backend through POST request. Out of them, the primary way is FormData. This is ideal when you have simple input fields. But it could become very complex when you need to send array of data. The below code can convert the nested javascript object into formdata

const formData = new FormData();
buildFormData(formData, objToSendAsPostRequest);

buildFormData = (formData, data, parentKey) => {
	if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
	  Object.keys(data).forEach(key => {
		this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
	  });
	} else {
	  const value = data == null ? '' : data;
  
	  formData.append(parentKey, value);
	}
}

    Tweet this to help others

You may also like –

Example

Suppose you have an object –

var obj = {
   name : {
             first: 'Akash',
             middle: 'Rishi',
             last: 'Mittal',
          },
}

Now if you want to send this complete javascript object obj as your POST request using FormData, then we can simply call our defined function buildFormData

var formdata = new FormData();
buildFormData(formdata, obj);

At the backend you can access the values of properties, first, middle, last, using POST as array. For Php we can write –

$_POST[‘name‘][‘first‘]
$_POST[‘name‘][‘middle‘]
$_POST[‘name‘][‘last‘]

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like
threejs - installation creating a scene

Getting started with three.js

Table of Contents Hide Introduction to three.jsInstallationCreating a SceneCreating a cameraCreating a rendererLive DemoLoading 3d Models In this article I am going to show you how you can get started…
View Post