Generowanie niestandardowego JSON tablicę

Question

Próbuję wygenerować obiekt JSON jak poniżej,

{"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"]}} 

Aktualny kod generuje wszystko z wyjątkiem tej części poniżej,

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

słowo wartość robi” t zmiana, również powinna przyjąć wartość wejściową do formatu daty, a identyfikator jest również stałą wartością.

$(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>

We wszystkich innych wejść kod ten haczyk nazwa wejścia i wartości wejściowych. Próbuję uzyskać powyższą wzmiankę o obiekcie JSON, czy to możliwe. Proszę o poradę.

Answer 1

Uzyskanie wszystkich danych w formularzu można wykonać za pomocą poniższej funkcji. Jeśli chcesz definicję rekursywną - proponuję dodanie wewnętrznych formularzy.

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