Form To JSON And JSON To Form Converter – form-data-json

Preview:

Description:

form-data-json is a Vanilla JavaScript library to simplify the manipulation of HTML form with 2 functionalities:

• Form Builder: Fill form fields with JSON data you provide.
• Form Output: Output form values as JSON data.

How to use it:

1. To get started, include the JavaScript file form-data-json.min.js on the webpage.

<script src="dist/form-data-json.min.js"></script>

2. Your form fields must have unique names as follows:

<input type="email" name="email" />
<input type="email" name="name" />

3. Fill the form fields with JSON data you provide.

FormDataJson.fromJson(document.querySelector("form"), {
  'email': '[email protected]',
  'name': 'cssscript.com''
})

4. Convert form data into JSON.

let values = FormDataJson.toJson(document.querySelector("form"))
let values = FormDataJson.toJson('#myForm');

5. More API methods.

// reset the form
FormDataJson.reset(document.querySelector("form"))
// clear all form fields
FormDataJson.clear(document.querySelector("form"))

6. Possible options for the fromJson method.

FormDataJson.fromJson(document.querySelector("form"), {
  'email': '[email protected]',
  'name': 'cssscript.com''
},{
  /**
   * Does expect the given values are in a flatList, previously exported with toJson
   * Instead of the default bevhiour with nested objects
   * @type {boolean}
   */
  'flatList': false,
  /**
   * If true, than all fields that are not exist in the passed values object, will be cleared/emptied
   * Not exist means, the value must be undefined
   * @type {boolean}
   */
  'clearOthers': false,
  /**
   * If true, than all fields that are not exist in the passed values object, will be reset
   * Not exist means, the value must be undefined
   * @type {boolean}
   */
  'resetOthers': false,
  /**
   * If true, when a fields value has changed, a "change" event will be fired
   * @type {boolean}
   */
  'triggerChangeEvent': false
})

7. Possible options for the toJson method.

let values = FormDataJson.toJson(document.querySelector("form"),{
    /**
     * Include all disabled field values
     * @type {boolean}
     */
    'includeDisabled': false,
    /**
     * Include all button field values
     * @type {boolean}
     */
    'includeButtonValues': false,
    /**
     * Include all unchecked radio/checkboxes as given value when they are unchecked
     * If undefined, than the unchecked field will be ignored in output
     * @type {*}
     */
    'uncheckedValue': undefined,
    /**
     * A function, where first parameter is the input field to check for
     * Must return true if the field should be included
     * All other return values, as well as no return value, will skip the input field in the progress
     * @type {function|null}
     */
    'inputFilter': null,
    /**
     * Does return an array list, with same values as native Array.from(new FormData(form))
     * A list will look like [["inputName", "inputValue"], ["inputName", "inputValue"]]
     * The input name will not be changed and the list can contain multiple equal names
     * @type {boolean}
     */
    'flatList': false,
    /**
     * If true, than this does skip empty fields from the output
     * Empty is considered to be:
     * An empty array (for multiple selects/checkboxes)
     * An empty input field (length = 0)
     * This does recursively remove keys
     * Example: {"agb":"1", "user" : [{"name" : ""},{"name" : ""}]} will be {"agb":"1"}
     * @type {boolean}
     */
    'skipEmpty': false,
    /**
     * A function that will be called when all file fields are read as base64 data uri
     * First passed parameter to this function are the form values including all file data
     * Note: If set, the original return value from toJson() returns null
     * @type {function|null}
     */
    'filesCallback': null,
    /**
     * By default, files are read as base64 data url
     * Possible values are: readAsDataURL, readAsBinaryString, readAsText, readAsArrayBuffer
     * @type {string}
     */
    'fileReaderFunction': 'readAsDataURL',
    /**
    * If true then values try to be a real Array instead of Object where possible
    * If false then all values that are multiple (multiple select, same input names checkboxes, unnamed array indexes, etc...) will be objects
    * @type {boolean}
    */
    'arrayify': true
})

Changelog:

v2.2.1 (08/13/2023)

• fixed set checkbox checked with array values on implicit names

v2.2.0 (08/03/2023)

• added es6 module support

v2.1.2/3 (02/10/2022)

• fixed issue with skipEmpty and nested input value
• fixed issue with callback is empty in case of file input

v2.1.1 (12/06/2021)

• accept a $ instance also as html element in toJson/fromJson, which is used by many libraries that memic jquery behaviour – previously only explicitly jQuery was supported

v2.1.0 (10/24/2021)

• added new toJson option arrayify to explicitely disable array return values when needed, default is true

v2 (10/04/2021)

• complete refactoring
• fixed many edge case issues from v1
• removed class FormDataJsonOptions. Use bare {} objects now as options
• removed method FormDataJson.flattenJsonFormValues. Use flatList = true option in toJson. Note: Output still has changed significantly to v1.
• changed method FormDataJson.setInputValue and is now considered internal only. No direct replacement. Use fromJson if you need to set any input value
• removed 3rd parameter formToJson/toJson callback function. It is now set into option filesCallback
• renamed method formToJson to toJson
• renamed method fillFormFromJsonValues to fromJson
• renamed option unsetAllInputsOnFill to clearOthers
• renamed option includeUncheckedAsNull to uncheckedValue and now represent the value that unchecked inputs should have in output
• added option skipEmpty
• added option fileReaderFunction
• added option triggerChangeEvent
• added option resetOthers
• added method clear
• added method reset
• added unminified compiled file
• optimized compiled files