使用动态输入将表单数据序列化为 JSON

Question

我正在尝试序列化我的表单数据（名称数组），到目前为止我只能序列化数组中的最后一个对象。我可以动态附加一组表单字段，当我单击提交时，它仍然只会在数组中附加新的（最后一个）对象。我已经尝试了很多不同的方法来做到这一点，这是我最接近的。这是操场上的代码 - http://www.bootply.com/pv7fFLC1uJ。我想看的例子：

{
  timeZonePicker: "-7",
  start: "09:00",
  end: "17:00",
  content: "San Francisco"
}
{
  timeZonePicker: "-3",
  start: "09:00",
  end: "17:00",
  content: "São Paulo"
}

HTML

<form class="form-inline fields_wrapper">
    <select class="form-control timeZonePicker" name="timeZonePicker[]" id="timeZoneId">
      <option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option>......
    </select>
    <input type="time" class="form-control start" name="start[]" value="">
    <input type="time" class="form-control end" name="end[]" value="">
    <input type="text" class="form-control content" name="content[]" value="">
</form>

jQuery

$.fn.serializeObject = function(options) { 
    var data = $(this).serializeArray(), obj = {};   
    $.each(data, function(i, el) {
        console.log(data);
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") {
          key = key.slice(0,-2);
        }  
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }
    });
    return obj;
};

Answer 1

您没有创建和返回数组。您的对象属性在每个迭代中都会被覆盖，并且您只返回一个对象，它是最后一次迭代

尝试（未经测试）：

$.fn.serializeObject = function(options) { 
    var data = $(this).serializeArray(), 
        // results array
        res = [];   
    $.each(data, function(i, el) {

      var obj={}

        console.log(data);
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") {
          key = key.slice(0,-2);
        }  
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }

      res.push(obj)
    });
  // return array instead of the single object
    return res;
};

如果您为每行数据的包装器提供一个通用类并循环遍历这些类，而不使用serializeArray()，则整个事情会简单得多。

Answer 2

正如 charlietfl 所说，您只返回一个对象，而不是数组。

按照您的操作方式，您可以同时遍历表单中的所有对象。如果你想走这条路，你必须知道你何时创建了一个对象，这样你就可以将它添加到数组中。

这是一个简单的解决方案（虽然不是最漂亮的）：

//build the json objects for each set of form fields
$.fn.serializeObject = function(options) { 
  var data = $(this).serializeArray(), obj = {}, all = []; 
    $.each(data, function(i, el) {
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") {
          key = key.slice(0,-2);
        }  
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }

      if ((i + 1) % Object.keys(options).length == 0) {
        all.push(obj);
        obj = {};
      }
    });
    return all;
};