How to Convert a JavaScript Object to a Form Data in JavaScript?

In web development, especially when dealing with forms and AJAX requests, you might find yourself needing to convert a JavaScript object into a FormData object. The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be sent via XMLHttpRequest or fetch() to the server.

What is FormData?

FormData is a web API that allows you to create a set of key/value pairs representing form fields and their values. This is particularly useful when you need to send form data to a server using AJAX, or when dealing with file uploads. Each pair in the FormData object is stored as a key-value pair.

Why Convert a JavaScript Object to FormData?

There are several scenarios where converting a JavaScript object to FormData is necessary:

• File Uploads: When you need to upload files along with other form data.
• Multipart/Form-Data Requests: When interacting with APIs that require data to be sent in multipart/form-data format.
• Complex Forms: When dealing with complex forms where you want to manage data as a JavaScript object before sending it to the server.

Approach For Converting To Form Data

The conversion process involves iterating over the object’s properties and appending them to a FormData instance. Below is a step-by-step guide on how to do this.

Step 1: Create the JavaScript Object:

First, you need a JavaScript object that you want to convert. This object can contain various data types, including strings, numbers, and even files.

const data = {
    name: 'John Doe',
    age: 30,
    occupation: 'Developer',
    profileImage: document.querySelector('input[type="file"]').files[0]
};

Step 2: Initialize the FormData Object

Next, you need to create an instance of the FormData object. This object will store the key-value pairs that you will append from your JavaScript object.

const formData = new FormData();

Step 3: Append Key-Value Pairs to FormData

Now, you can loop through the JavaScript object and append each key-value pair to the FormData instance. You can use a for...in loop to iterate over the object’s properties.

for (const key in data) {
    if (data.hasOwnProperty(key)) {
        formData.append(key, data[key]);
    }
}

In this code snippet:

• We loop through the data object.
• For each key-value pair, we check if the property is directly on the object using hasOwnProperty.
• We then append the key and its corresponding value to the FormData object.

Step 4: Sending the FormData

Once your FormData object is populated, you can send it using XMLHttpRequest, fetch(), or any other method that supports multipart form data.

Using Fetch API:

fetch('/upload', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error)); 

Or using XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData); 

Step 5: Handling Nested Objects

If your JavaScript object contains nested objects, the basic approach outlined above will not work as intended. To handle nested objects, you would need to implement a recursive function to flatten the object structure before appending it to the FormData object.

In this approach, appendFormData is a recursive function that flattens the object hierarchy by appending keys in a bracket notation format, which is common in PHP and other backend frameworks for parsing nested structures.

function appendFormData(formData, data, parentKey = '') {
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const formKey = parentKey ? `${parentKey}[${key}]` : key;

            if (typeof data[key] === 'object' && !(data[key] instanceof File)) {
                appendFormData(formData, data[key], formKey);
            } else {
                formData.append(formKey, data[key]);
            }
        }
    }
}

const formData = new FormData();
appendFormData(formData, data);

Example: Here is the full script that you can run directly in a browser's console or in a Node.js environment (with slight modifications for Node.js):

const data = {
    name: 'John Doe',
    age: 30,
    occupation: 'Developer',

};

const formData = new FormData();

for (const key in data) {
    if (data.hasOwnProperty(key)) {
        formData.append(key, data[key]);
    }
}

for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

Output: Create a file named a.js in your project directory and run :

node a.js