javascript - How to get nested object from a FormData object [object Object]

Question

I want to get the entire nested object (with all the props) of a value that is stored in a FormData. This is possible?

Example

const formData = new FormData();
formData.append('k1', 123);
formData.append('k2', 'ABC');
formData.append('k3', {
  a: 1,
  b: '2'
});

data = {};
formData.forEach((value, key) => {
  console.log(`Key: ${key}`, {
    key,
    value,
    type: typeof(value),
    getResult: formData.get(key),
    getAllResult: JSON.stringify(formData.getAll(key))
  });

  data[key] = value;
});

console.warn('Final result', {
  data
});

.as-console-wrapper {
    max-height: 100% !important;
}

There is a way to capture the keys and values of the k3 without using jQuery or any external library?

The FormData API has pretty much everything you'd need developer.mozilla.org/en-US/docs/Web/API/FormData specifically if you set multiple values for a single key, the getAll() API should return this: developer.mozilla.org/en-US/docs/Web/API/FormData/getAll — scunliffe
– scunliffe, Commented Apr 20, 2022 at 18:46
Why are you trying to store an object in a formData instance? — user5734311
– user5734311, Commented Apr 20, 2022 at 18:47
Yeah I just realized that the value you are setting "looks" like an object, but this isn't supported developer.mozilla.org/en-US/docs/Web/API/FormData/append will convert that to a single string. If this is what you do want, then you'll need to parse the JSON when you retrieve the value back out — scunliffe
– scunliffe, Commented Apr 20, 2022 at 18:49
@scunliffe the method getAll is returning a string with 'object Object' — MiBol
– MiBol, Commented Apr 20, 2022 at 18:50
@MiBol correct, because of the comment just above... the FormData API is just a convenience layer on top of the current HTTP Web forms... so you can either have a single key (e.g. field name) with a single string value, or you can repeat the key multiple times to store a "list/array" of single values. If you need to pass an object, you'll need to stringify your object to pass as a string, then parse it out after. — scunliffe
– scunliffe, Commented Apr 20, 2022 at 18:53

scunliffe · Accepted Answer · 2022-04-20 19:36:24Z

1

Ok, so this isn't quite what you're after, but here goes. If you want to pass in an object for your k3 value, then you'll need to stringify it first. You'll then need to parse it back out to an object wherever you want to use it. I've updated your code above to stringify the value, and attempt to parse it back out in your debugging (just so that you can see it)

const formData = new FormData();
formData.append('k1', 123);
formData.append('k2', 'ABC');
formData.append('k3', JSON.stringify({
  a: 1,
  b: '2'
}));

data = {};
formData.forEach((value, key) => {
  console.log(`Key: ${key}`, {
    key,
    value,
    type: typeof(value),
    rawResult: formData.get(key),
    potentialObjResult: (function(val){
         let potential = undefined;
         try {
            potential = JSON.parse(val);
         } catch(ex){
             console.log('could not parse: <' + val + '> as JSON');
         }
         return potential;
     })(formData.get(key))
    });
  data[key] = value;
});

console.warn('Final result', {
  data
});

answered Apr 20, 2022 at 19:36

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MiBol Over a year ago

It's a fair way to get things done. Then, in a short, the way of it's implemented there is not a way to get the entire object. Pretty clear answer!

scunliffe Over a year ago

It might not be a typical use case, but the ability/desire to pass arbitrary data to the server is pretty common. endpoint.html?data={a:1,b:'2',c:true} or things like: endpoint.html?selectedOptions=[3,7,15,38,241] especially if your server side can parse JSON easily/natively.

user5734311 Over a year ago

Passing it to the server, absolutely. But getting it back out of formData? Why?

scunliffe Over a year ago

Yeah I presumed here that that was only for the OP’s debugging purposes… I’m not recommending to keep that.

Collectives™ on Stack Overflow

javascript - How to get nested object from a FormData object [object Object]

Example

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related