Send information as FormData object

Question

Send information as FormData object

I'm getting the data in this format:

pert_submit: {systemId: "53183", pert-id: "176061", score: 0, q2c: "3\0", q2t: "", …}

Now I need to send it as FormData in my post request. Since I can't use an HTML form for this purpose, the data should be in the following format in the http post call

systemId: "53183", pert-id: "176061", score: 0, q2c: "3\0", q2t: ""

I attempted to use FormData like this

 var form_data = new FormData();
            for ( var key in this.dataObject['pert_submit'] ) {
                form_data.append(key, this.dataObject['pert_submit'][key]);
            }

How can I achieve sending FormData in the specified format as mentioned above

(systemId: "53183", pert-id: "176061", score: 0, q2c: "3\0", q2t: "")

javascript typescript

Answer 1

Answer №1

When I need both the key and value from an object, I prefer using Object.entries over Object.keys. One neat trick is to use array destructuring within a .forEach loop to easily access both values.

const data = {systemId: "53183", "pert-id": "176061", score: 0, q2c: "3\0", q2t: "" };
const formData = new FormData();

Object.entries(data).forEach(([key, value]) => formData.append(key, value))

console.log([...formData.entries()]);

Answer 2

When I need both the key and value from an object, I prefer using Object.entries over Object.keys. One neat trick is to use array destructuring within a .forEach loop to easily access both values.

const data = {systemId: "53183", "pert-id": "176061", score: 0, q2c: "3\0", q2t: "" };
const formData = new FormData();

Object.entries(data).forEach(([key, value]) => formData.append(key, value))

console.log([...formData.entries()]);

Answer 3

Answer №2

Dealt with technicians who struggle to adapt; as highlighted in the feedback, manually creating the string is necessary. Here's a solution.

Keep in mind that when adding to FormData, a key is needed. In this example, I used "pert_submit"; you'll have to determine the appropriate key with the tech team. You could also consider sending data directly to the request body using fetch or XMLHttpRequest, which can be more complex.

const data = { systemId: "53183", "pert-id": "176061", score: 0, q2c: "3\0", q2t: "" };
const getStringIfString = (val) => JSON.stringify(val);
const formattedOutput = Object.entries(data).reduce((agg, [key, val]) => `${agg}${agg.length ? ', ' : ''}${key}: ${getStringIfString(val)}`, "");
const formData = new FormData();
formData.append('pert_submit', formattedOutput);
console.log(formattedOutput);

Lastly, note that the value "3\0" is interpreted in JavaScript as the number 3 followed by a NUL character, explaining any unusual output in the log.

Answer 4

Dealt with technicians who struggle to adapt; as highlighted in the feedback, manually creating the string is necessary. Here's a solution.

Keep in mind that when adding to FormData, a key is needed. In this example, I used "pert_submit"; you'll have to determine the appropriate key with the tech team. You could also consider sending data directly to the request body using fetch or XMLHttpRequest, which can be more complex.

const data = { systemId: "53183", "pert-id": "176061", score: 0, q2c: "3\0", q2t: "" };
const getStringIfString = (val) => JSON.stringify(val);
const formattedOutput = Object.entries(data).reduce((agg, [key, val]) => `${agg}${agg.length ? ', ' : ''}${key}: ${getStringIfString(val)}`, "");
const formData = new FormData();
formData.append('pert_submit', formattedOutput);
console.log(formattedOutput);

Lastly, note that the value "3\0" is interpreted in JavaScript as the number 3 followed by a NUL character, explaining any unusual output in the log.

Send information as FormData object

Answer №1

Answer №2

Similar questions

managing, modifying and removing information within the app.controller in AngularJS

Show segments of video stream on page using node.js

React Grid by DevExtreme

Using the Sequelize query string prefix to find data that starts with a specific value

In search of a new object value to update

How can I pass a string value from C++ to JavaScript in a Windows environment using Visual Studio 2008?

Anchor tags created using JQuery will remain on the same page without redirecting

Should front-end and back-end share Typescript data modeling through classes or interfaces?

Sending various values to a JavaScript function

Leveraging the arguments object within function declarations

Using Fabric.js to manage image controls situated beneath another overlay image

Google Cloud Endpoints API Encounter 404 Error

Unable to establish a connection to 'X' as it is not recognized as a valid property

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Dealing with ReactJs Unhandled Promise Rejection: SyntaxError - Here's the Solution

Looking to include some extra padding when an item is displayed - jQuery

Is it recommended to run JavaScript functions obtained from REST APIs?

"Deleting a specific row from a SQL Server using Node.js: Step-by-Step Guide

Issue: Proper handling of data serialization from getStaticProps in Next.js

Stop the selection of text within rt tags (furigana)