Generating JSON String from Form

Question

I am new to JSON and trying hard to understand it's working.

HTML

<form id="edge" class="form-horizontal" method="post" action="javascript:submit();">
    <input type="text" class="input-xlarge" id="latency" name="latency" placeholder="latency">
    <input type="text" class="input-xlarge" id="throughput" name="throughput" placeholder="throughput">
    <input type="text" class="input-xlarge" id="outUID" name="outUID" placeholder="outUID">
    <input type="text" class="input-xlarge" id="inUID" name="inUID" placeholder="inUID">
    <button type="submit" class="btn btn-success" >Submit Data</button>
</form>

JSON String to be generated as:

{"latency":1.6,"throughput":6.01,"outUID":{"V_ID":"40"},"inUID":{"V_ID":"16"}}

Here's the form and JSON String to be generated

Could some one guide me how do I create that nested JSON object?

possible duplicate of [Convert form data to JS object with jQuery](http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery) — Joum, Aug 21 '13 at 13:30
Where are the `V_ID` key/value pairs coming from in the `outUID` and `inUID` objects? — Rory McCrossan, Aug 21 '13 at 13:31

score 1 · Accepted Answer · answered Aug 21 '13 at 13:40

Since it looks like you want the values of outUID and inUID to be nested for some reason you'll need to build the object manually. Here's a simple example:

var $latency = $('#latency'),
    $throughput = $('#throughput'),
    $outUID = $('#outUID'),
    $inUID = $('#inUID');

var myJSONObject = {
    latency:$latency.val(),
    throughput:$throughput.val(),
    outUID:{
        V_ID:$outUID.val()
    },
    inUID:{
        V_ID:$inUID.val()
    }
};
var stringJSON = JSON.stringify(myJSONObject);

score 0 · Answer 2 · answered Aug 21 '13 at 13:38

Pure javascript example

var els=document.getElemtById('edge').getElementsByTagName('input');

or

var els=document.querySelectorAll('input[class=input-"xlarge"]');

to get the elements

then

var array=[]
for(var a=0,b;b=els[a]; ++a){
 array[a]=b.value
}

array is the json object

JSON.styringify(array)

is the json string

tip: if you plan to use this with ajax there is a new way called FormData();

so:

var fd=FormData(document.getElemtById('edge'));

contains the whole form , including files

score 0 · Answer 3 · answered Aug 21 '13 at 14:01

This code allow you to add more fields if required to do so without hard coding the field attributes

http://jsfiddle.net/6vQY9/

HTML

<form id="edge" class="form-horizontal" method="post" action="javascript:submit();">
    <input type="text" class="input-xlarge" id="latency" name="latency" placeholder="latency">
    <input type="text" class="input-xlarge" id="throughput" name="throughput" placeholder="throughput">
    <input type="text" class="input-xlarge" id="outUID" name="outUID" placeholder="outUID" data-prop="V_ID">
    <input type="text" class="input-xlarge" id="inUID" name="inUID" placeholder="inUID" data-prop="V_ID">
    <button type="submit" class="btn btn-success">Submit Data</button>
</form> <pre></pre>

JS

function submit() {
    var JSONString = "";
    jQuery('#edge input').each(function () {
        var that = jQuery(this);
        var val = that.val();
        var partJSON = "";
        var quote = "\"";
        if (that.data('prop')) {
            partJSON = "{ " + quote +that.data('prop') + quote+ " : " + quote + val + quote + " }";
        } else {
            partJSON = val;
        }
        var comma = that.next('input').length > 0 ? "," : "";

        partJSON = quote + that.prop('id') + quote + ":" + partJSON + comma;
        JSONString += partJSON

    });

    JSONString = "{ " + JSONString + " }";

    jQuery('pre').text(JSONString);
}

Generating JSON String from Form

3 Answers3