从动态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)); 
});