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

Serialize form data to JSON with Dynamic Inputs

本文关键字：数据 序列化 JSON 表单 动态 输入      更新时间：2023-09-26

我正在尝试序列化我的表单数据（名称数组），到目前为止，我只能序列化数组中的最后一个对象。我可以动态附加一组表单字段，当我单击提交时，它仍然只会在数组中附加新的（最后一个）对象。我已经尝试了很多不同的方法来做到这一点，这是我最接近的。这是操场上的代码 - 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;
};

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

尝试（未经测试）：

$.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()，那么整个事情会简单得多

正如 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;
};
相关文章：