從動態HTML表單創建JSON

Question

這裏是我的小提琴：DEMO

我希望我的JSON爲低於上的「保存操作」，然後單擊當類別爲「SMS」。我無法做到這一點。

此外，表格字段會隨類別的變化而變化。

{ 
    "name": "", 
    "category": "SMS", 
    "description": "", 
    "apiUrl": "", 
    "apiMethod": "GET", 
    "apiPayload": { 
    "senderName": "", 
    "number": "", 
    "message": "" 
    }, 
    "@class": "action" 
} 

任何幫助將不勝感激。謝謝:)

Answer 1

將apiPayload移出reduce回撥函數。 並分配reduce loop後的值。

$('#saveActions').on('click', function(e) { 

    var apiPayload = {}; 

    var jsonData = $('form.form-horizontal#events') 
     .find(':input:not(button):not(#new-option-event)').get() 
     .reduce(function(acc, ele) { 
      if (ele.closest('.payload')) { 
      var i = 0; 
      apiPayload[ele.name] = ele.value.trim(); 
     } else { 
      acc[ele.name] = ele.value.trim(); 
     } 
     return acc; 
    }, {}); 
    jsonData['apiPayload'] = apiPayload;//assign value 
    jsonData['@class'] = "action"; 

    alert(JSON.stringify(jsonData, null, 4)); 
});