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

Category: Form , Javascript | December 6, 2021
Author:brainfoolong
Views Total:426 views
Official Page:Go to website
Last Update:December 6, 2021
License:MIT

Preview:

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

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.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

You Might Be Interested In:


Leave a Reply