form-serialize-json

Serialize form data to Json (deep structure).

This script solved the problem of hierarchy name of Input in C#. serialises a form to an object. The use is the same with $.fn.serialize and $.fn.serializeArray, or serializeJson(array).

The keys are the form element names(split with dot) and the value is the the form element value. If multiple form elements have the same name with different values, the value will replace the origin value.

Support

Feature	Node.js	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	5	Yes	4	9	10.5	5

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes	Yes	Yes	4	Yes	Yes	Yes

Install

Node.js

$ npm install form-serialize-json

Html

// serializeJson(array)
<script type="text/javascript" src="serialize-json.js">
 
// or jquery.fn.serializeJson
<script type="text/javascript" src="jquery.min.js">
<script type="text/javascript" src="serialize-json.js">

Use

form-serialize-json is surprisingly easy to use.

<form id="example">
    <input type="text" name="title" value="serialize-json">
    <input type="text" name="desc" value="demo serializeArray of form to json object.">
</form>

var serialize = require('form-serialize-json'),
    form = document.querySelector('#example');
 
var obj = serialize(form);
// obj -> { title: "serialize-json", desc: "demo serializeArray of form to json object." }

array fields (auto indexed)

Fields who's name ends with [] are always serialized as an array field.

<form id="example">
    <input type="text" name="user[]" value="Someone A">
    <input type="text" name="user[]" value="Someone B">
    <input type="text" name="user[100]" value="Someone C">
</form>

var serialize = require('form-serialize-json'),
    form = document.querySelector('#example');
 
var obj = serialize(form);
// obj -> { user: ["Someone A", "Someone B", empty × 98, "Someone C"] }
// empty × 98 is real empty

array fields (auto append)

Fields who's name ends with [] are always serialized as an array field.

<form id="example">
    <input type="text" name="data.index[0]" value="item 1">
    <input type="text" name="data.index[]" value="item 2">
    <input type="text" name="data.index[1]" value="item 3">
</form>

var serialize = require('form-serialize-json'),
    form = document.querySelector('#example');
 
var obj = serialize(form, true);  //protected
// obj -> { data: { index: ["item 1", "item3", "item 2"] } }

hierarchy objects

it will be come deep json structure if fields who has name with dot(.)

<form id="example">
    <input type="text" name="desc" value="demo serializeArray of form to json object.">
    <input type="text" name="users[0].name" value="user A">
    <input type="text" name="users[0].skills[0].name" value="nodejs">
    <input type="text" name="users[0].skills[0].years" value="5">
</form>

var serialize = require('form-serialize-json'),
    form = document.querySelector('#example');
 
var obj = serialize(form);
/**
obj -> {
    desc: "demo serializeArray of form to json object.",
    users: [
        {
            name: "user A",
            skills: [
                { name: "PHP", years: 12 },
                { name: "Ruby", years: 5 },
                { name: "C#", years: 2 }
            ]
        }
    ]
}
*

References

This module is based on ideas from jQuery serialize.

MIT License

Copyright (c) 2017 yiming.hsu [e-mail]