Create JSON object dynamically from a form custom attributes

Question

What is the best way to parse through each input on a form to produce the Json object below? I am not married to the custom Attributes, if the is a better simpler way please share it.

   <form>   
    <label>Address</label>

       <input type="text" name="address" data-label="Address" data-group="partcipantInfo" data-column="dataBaseAddress" data-internalUse="1" data-userDefined="0" value="123 Acme Way"/>


     <label>City</label>

          <input type="text" name="City" data-label="City" data-group="partcipantInfo" data-column="dataBaseCity" data-internalUse="1" data-userDefined="1" value="Loony Tunes"/>

   <input type="submit"value="Submit" />
</form>

Trying to get this result for each

{
   "inputs":[
      {
         "DataLabel":"Address",
         "DataGroup":"Address on Record",
         "DataColumn":"DataBaseAddress",
         "Value":"123 Acme Way",
         "InternalUse":true,
         "userDefined":false
      },
      {
         "DataLabel":null,
         "DataGroup":"Address on Record",
         "DataColumn":"dataBaseCity",
         "Value":"Loony Tunes",
         "InternalUse":true,
         "userDefined":true
      }
   ]
}

Ganesh · Accepted Answer · 2014-03-11 17:41:39Z

1

Use the jQuery serializeArray() method:

var jsonData = $("form").serializeArray();

For more info:

http://api.jquery.com/serializeArray/

answered Mar 11, 2014 at 17:41

Ganesh

2451 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tibos · Accepted Answer · 2014-03-11 17:49:43Z

0

Fairly simple:

var inputs = document.querySelectorAll('input[type="text"]');
var obj = {
  inputs : Array.prototype.map.call(inputs, function(input){
    return {
      DataLabel : input.getAttribute('data-label'),
      DataGroup : input.getAttribute('data-group'),
      DataColumn : input.getAttribute('data-column'),
      Value: input.value,
      InternalUse: !!+input.getAttribute('data-internalUse'),
      userDefined: !!+input.getAttribute('data-userDefined')
    }
  })
}

console.log(obj);

DEMO: http://jsbin.com/casazame/1/edit

Note: !!+ is a short way of converting '0'/'1' to false/true.

edited Mar 11, 2014 at 17:49

answered Mar 11, 2014 at 17:44

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

Collectives™ on Stack Overflow

Create JSON object dynamically from a form custom attributes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related