DEV Community 👩‍💻👨‍💻

Jashua
Jashua

Posted on

HTML form input to nested JSON objects?

{
   "main-field":"value",
   "main-nested":{
      "nested-field":"value",
      "nested-array":[
         {
            "item-1":"value"
         },
         {
            "item-2":"value"
         }
      ]
   }
}
Enter fullscreen mode Exit fullscreen mode

How can I convert an HTML form to such JSON structure?

I thought I would find an straight forward answer, but I haven't.

I'm not a front-end developer, but my co-workers do use JavaScript and jQuery, if that's needed. (sadly we do not use React or Angular)

Top comments (2)

Collapse
 
nestedsoftware profile image
Nested Software • Edited on

I found this answer on stackoverflow, which I think addresses what you want to do.

It recommends using $('form').serializeArray() in jQuery - see serializeArray.

Once you have that object, you can use javascript to create a copy that has any modifications you might want to make before sending it to the backend API...

By the way, #explainlikeimfive is generally intended for questions of a general nature where you want to understand the "big idea" or the "view from above" for a given topic. For a more specific technical question like this one, I'd recommend using #help instead - thanks!

Collapse
 
jouo profile image
Jashua Author

Thank you very much, I will take a look at it :D

I see! I actually didn't realize there was a #help section, I will make use of it in the future

🌚 Life is too short to browse without dark mode