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

Subscribing to valueChanges in reactive forms to dynamically update checkbox options

Responsive screen sizing in Vue.js

Chrome fails the karma tests while phantomjs passes them

Tips for creating a dynamic sidebar animation

What is the process for transferring a PDF document to the frontend?

What are the best techniques for maintaining state in Xstate state machines within a React application?

Issues with Firebase Cloud Messaging functionality in Angular 10 when in production mode

AngularJS implemented a header authorization feature

Error message: Issue with AWS Serverless Lambda and Angular - TypeError: express function not defined

What could be causing the lack of data with 'react-hook-form'?

Function that is triggered repeatedly when modifying the state within it

Can we dynamically apply a class to the body depending on the domain in the window's URL?

I am encountering a problem with my Vuex getter where it is sending an Array with a length of 0, but when expanded in the console,

Troubleshooting Problem with CSS Background-Image in Safari

A guide on consolidating all app.use statements into a single shared file

What is the best way to split a single column into two using blocks?

Unexpected updates occurring in custom Google Sheet functions

Can theme changes be carried over between different pages using Material UI?

There is an issue as headers cannot be changed after being set for the client

Buefy table in Vue with various row statuses