Nested Form Data Keys

💬 Feature Requests
1

Is it possible to have nested form data keys? For example I have the following data (sample data to be an example, not actual data of course) as the source for a form:

{
  "name": "James",
  "website": "google.com",
  "social_media": {
    "facebook": "facebook.com/james",
    "twitter": "twitter.com/james"
  }
}

I want to set be able to set a form data key to name, or social_media.facebook, to be able to autopopulate from the source.

I am thinking of just flattening the data in a transform, but ideally this wouldn't be necessary.

Any advice or other workarounds would be appreciated.

2

Also interested in this - currently when I set the "Form data key" to something like this:

image

The key is then stringified as "address.line1".

3

Hi there,

I don't believe this is supported yet; moving this to feature requests!

1 Like
4

we need this...

5

Hi there, This hasn't been added to our roadmap yet :disappointed: Would you be able to work around this limitation by transforming your data to be an object with a depth of only 1?

In the first example provided,

{ "name": "James", "website": "google.com", "social_media": { "facebook": "facebook.com/james", "twitter": "twitter.com/james" } }

could be transformed with JS to:

{ "name": "James", "website": "google.com", "socialmediafacebook": "facebook.com/james", "socialmediatwitter": "twitter.com/james" }

6

This is exactly what I did the couple times I ran into this. For those coming across this in the future, this function should unnest a object recursively, adding periods between the keys. Probably isn't perfect but will give you a good starting point to work from. My original example would look like this:

{ "name": "James", "website": "google.com", "socialmedia.facebook": "facebook.com/james", "socialmedia.twitter": "twitter.com/james" }

const flattenObj = (obj) => {
    let result = {};
     for (const i in obj) {
        if ((typeof obj[i]) === 'object' && !Array.isArray(obj[i])) {
            const temp = flattenObj(obj[i]);
            for (const j in temp) {
                 result[i + '.' + j] = temp[j];
            }
        }
         else {
            result[i] = obj[i];
        }
    }
    return result;
};

Hope this helps!

2 Likes
7

+1 to adding support for this. I would even be fine with using a container inside a form to act as the object wrapper for any form keys inside it. In the example above, you could have a container with the form key "social_media" and then two inputs inside it with the form keys "facebook" and "twitter". When rendering the data, the form would be nested properly.

8

Thanks for the +1 @ChrisGriffithPF!

Unfortunately, our team is not currently prioritizing this feature request, so I recommend trying a workaround for the time being