Generate Nested JSON From Form Data - parseJsonFromForm

A simple form to JSON jQuery plugin that generates nested JSON objects from your form data, compared to flat JSON arrays using serializeArray() jQuery method.

See Also:

• 10 Best Form Builder Plugins To Generate Forms From JSON Data

How to use it:

1. Load the parseJsonFromForm script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/parseJsonFromForm.js"></script>

2. Convert form data into a flat JSON array using serializeArray() jQuery method

<form id="example">
  <label>First Name</label>
  <input type="email" name="first-name" value="jQuery">
  <label>Last Name</label>
  <input name="last-name" value="script">
  </div>
</form>

json = jQuery('#example').serializeArray();
=>
[
  {"name":"first-name","value":"jQuery"},
  {"name":"last-name","value":"script"}
]

3. Convert form data into a nested JSON object using the parseJsonFromForm function.

json = parseJsonFromForm(jQuery('#example').serializeArray());
=>
{ 
  "first-name":"jQuery",
  "last-name":"script"
}

---

This awesome jQuery plugin is developed by SauliusTheBlack. For more Advanced Usages, please check the demo page or visit the official website.