Generate a custom JSON array

Question

I'm trying to generate a JSON object like below,

{"project":{"name":"test name","description":"test description","identifier":"testid",{"custom_fields":[{"value":"2015-12-01","id":4},{"statr":"2015-12-31,"id":5}]},stack":"Java","enabled_module_names":["issue_tracking","time_tracking"],"tracker_ids":["1","2","3"]}}

Current code generates everything except this part below,

{"custom_fields":[{"value":"2015-12-01","id":4},{"value":"2015-12-31,"id":5}]}

The word value doesn't change, also should take the input value to the date format and id is also a constant.

    $(document).ready(function(){
      
       $.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return {"project":o};
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});
   

<div class="row">
    
    <div class="col-lg-12">
        <form role="form">
          
            <div class="form-group">
                <label>Name &nbsp;</label>
                <input class="form-control" placeholder="Name" name="name">
            </div>
            
            <div class="form-group">
                <label>Description</label>
                <textarea class="form-control" rows="6" name="description"></textarea>
            </div>

            <div class="form-group">
                <label>identifier &nbsp;</label>
                <input class="form-control" placeholder="Identifier" name="identifier">
            </div>
          
            <div class="form-group">
                <label>Start Date &nbsp;</label>
                <input type="date">
            </div>
            <div class="form-group">
                <label>End Date &nbsp;&nbsp;</label>
                <input type="date">
            </div>
           
            <div class="form-group">
                <label> Stack &nbsp;</label>
                <select class="form-control" name="stack">
                  <option value="Java">Java</option>
                  <option value="Php">Php</option>
                  <option value="Ruby">Ruby</option>
                  <option value="C#">C#</option>
                  <option value="Python">Python</option>
                  <option value="Pearl">Pearl</option>
                  <option value="JavaScript">JavaScript</option>
                  <option value="Objective-C">Objective-C</option>
                </select>
            </div>

            <div>
            <label>Modules</label>
                <label class="checkbox-inline" name="modules">
                  <input type="checkbox" id="inlineCheckbox1" name="enabled_module_names" value="issue_tracking"> Issue Tracking
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="enabled_module_names" value="time_tracking"> Time Tracking
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" name="enabled_module_names" value="gantt"> Gant
                </label>
            </div>

            <label>Trackers</label>
                <label class="checkbox-inline" >
                  <input type="checkbox" id="inlineCheckbox1" name="tracker_ids" value="1"> Bug
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="tracker_ids" value="2"> Feature
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" name="tracker_ids" value="3"> Support
                </label>
            
            <div class="butn" style="margin-left: 15px; margin-top: 10px;top: 10px; position: relative;">
            <button type="submit" id="submit" class="btn btn-default">Submit Button</button>
            <button type="reset" class="btn btn-default">Reset Button</button>
            </div>
        </form>
    </div>
    <pre id="result"></pre>
</div>

In all other inputs this code catch the name of the input and value of the input. I'm trying to get the above mention JSON object, is it possible. Please advice.

Answer 1

Getting all the data in your form could be done with the below function. If you want a recursive definition -- I suggest adding inner forms.

var data = {}; 
$('form').find('input').each(function(){
    var name = $(this).attr('name');
    var value = $(this).val();
    data[name] = value;
});