objectbuilder - A jQuery Plugin

An objectbuilder is a jQuery plugin, which constructs JavaScript object by reading values of HTML controls. It uses name attribute value of control to name the property of the object and value of the control to set value of the property of the object.

It can be used in conjunction with Data Annotations feature of ASP.NET MVC to prepare JavaScript object that can be posted back to using Ajax functionality.

It has toObject method to create a JavaScript object. It accepts xpath expressions to use find and use the controls to prepare JavaScript object. It also accepts parent object name. Below are details about  default options the toObject method:

defaults =

{

    parent:'', //name of parent object name. Default value is empty

    selectors:''  //selectors to be used for preparing JavaScript object. Default is empty.

} 

How to use it: 

Let us take look at following html. It contains following controls.

1. FirstName textbox (name='FirstName')
2. LastName textbox (name='LastName')
3. Primary Address Country - textbox (name="Addresses[0].Country")
4. Alternate Address Country textbox (name=Addresses[1].Country")

<table cellpadding="2" cellspacing="0">
        <thead>
            <tr>
                <th colspan="2">
                    jQuery Object Builder - Employee and It's Addresses
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    Personal Details
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        First Name:</label>
                </td>
                <td>
                    <input type="text" name="FirstName" value="Sachin" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Last Name:</label>
                </td>
                <td>
                    <input type="text" name="LastName" value="Pawar" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Primary Address
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Country</label>
                </td>
                <td>
                    <input type="text" name="Addresses[0].Country" value="India" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Alternate Address
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Country</label>
                </td>
                <td>
                    <input type="text" name="Addresses[1].Country" value="India" />
                </td>
            </tr>
        </thead>
    </table>

Now, in order build JavaScript object using the objectbuilder, I will run following jQuery.

var object = $.objectbuilder.toObject({ selectors: 'input[type=text]', parent: 'employee' });

It will give an object with following hierarchy:

object

   |__ employee

          |___ FirstName = 'Sachin'

          |___ LastName = 'Pawar'

          |___ Adressess

                |___ [0]

                |      |

                |      |__ Country = 'India'

                |___ [1]

                       |

                       |__ Country = 'India'

You can find the plugin and sample HTML code at:

https://github.com/sachin-a-pawar/jquery-objectbuilder.git

Please let me know if you have suggestions.