my question is so simple I have a react project that uses this syntax:

const data = new FormData();
data.append("token", this.props.token);
data.append("origin", this.props.origin);
....

my question is :

is there any way that I can change this appends in to One line or some syntax like this?

const data = new FormData([('token', this.props.token), ('origin', this.props.origin)])

my question is so simple I have a react project that uses this syntax:

const data = new FormData();
data.append("token", this.props.token);
data.append("origin", this.props.origin);
....

my question is :

is there any way that I can change this appends in to One line or some syntax like this?

const data = new FormData([('token', this.props.token), ('origin', this.props.origin)])

• javascript
• node.js
• reactjs

• No way unless you write a custom wrapper for FormData – hindmost Commented Feb 14, 2019 at 8:31
• if what you say is true, it's so dumb that you can only create 1 one DataForm() and pass dozens of objects with append(). I don't know maybe I'm wrong about this. – Babak Abadkheir Commented Feb 14, 2019 at 8:36
• If all the data actually originates from a form, you can pass the form object to the constructor, and it will prepare the whole form data set in one go. If that’s not the case, you could still do this in a loop - over an array containing the parameter/property names as strings, or an object (if parameter name and property name could differ.) – 04FS Commented Feb 14, 2019 at 8:42
• 1 if what you say is true.. You shouldn't take my words on trust. Just check it yourself. – hindmost Commented Feb 14, 2019 at 8:44

6 Answers 6

If you want all the items in props to be added to FormData then you can loop through them and call formData.append(),

const formData = new FormData();
Object.keys(this.props)
      .forEach(key => formData.append(key, this.props[key])

If you want specific keys from this.props to add to FormData, then you could create an array of all the keys and then loop through them:

const addToFormData= ["token", "origin"]
const formData = new FormData();

addToFormData.forEach(k => formData.append(k, this.props[k])

It doesn't support by default, you can use third-party package to help you, here a good one https://www.npmjs./package/object-to-formdata

Example

import objectToFormData from "object-to-formdata";

const data = new FormData(objectToFormData({ token: this.props.token, origin: this.props.origin }));

or

import objectToFormData from "object-to-formdata";

const { origin, token } = this.props;
const data = new FormData(objectToFormData({ token, origin }));

there are no methods available to setting form data in one line

https://developer.mozilla/en-US/docs/Web/API/FormData#Methods

but you can pass props like array and loop through it

like :

   const keyValuePair=[
      {key:"token",value:this.props.token},
      {key:"origin",value:this.props.origin}
   ]

const data = new FormData();
keyValuePair.map((keyvalue)=>{
  data.append(keyvalue.key,keyvalue.value);
})

You can use Object.entries and iterate through each key-value pairs:

const obj = {
  getFormData() {
    const fd = new FormData();
    Object.entries(this.props)
      .forEach( ([key, value]) => fd.append(key, value) );
    // to show they'e added the same way
    fd.append('manual', 'manually set');
    return fd;
  },
  props: {
    key1: 'val1',
    key2: 'val2',
    key3: 'val3',
    key4: 'val4'
  }
};

console.log(...obj.getFormData());

The fold function Array.reduce can be used to pass each of the form entries to the FormData instance.

> Object.entries({a: 1, b: 2})
    .reduce(
      (formData, [k, v]) => formData.append(k, v) || formData,
      new FormData()
    )
FormData { a: '1', b: '2' }

First off the input data is transformed to [['a', 1], ['b', '2']] to get access to reduce. A FormData instance is created as an initial value for the iteration. Each iteration adds the key-value pair to the FormData and returns formData for the next iteration or as the final return value.

Copy paste version:

Object.entries(data).reduce((x, [k, v]) => x.append(k, v) || x, new FormData)

There is no type definition for the constant data. If you say data is a FormData and has the proberties token and origin, then you can write it easy in a single line:

const FormData data = new FormData(){ token = this.props.token, origin = this.props.origin };