使用jQuery将表单数据转换为JS对象，包括分组值

Question

我想将表单数据序列化为JSON对象，如下面的线程所述：Convert form data to JavaScript object with jQuery 然而，除了单个字段，它们出现在表单中，我有字段，我想组成单独的对象。例如，我有两个字段 - startDate和endDate。在JSON对象中，我想实现以下结构：

"dates" : {
     "startDate" : "03/19/2014",
     "endDate" : "03/27/2014"
},

所以，我想获取firstDate和endDate的值，将它们组合在一个对象dates中，并添加到包含单独字段值的对象。

有人能给我一个如何实现这一目标的提示吗？有没有办法定义某种JSON“模板”并用表格中的值替换属性值？

还有一个我需要支持的更深层的例子：

"demographic" : {
  "declaredGender" : "any",
      "estimatedGender" : "female",
      "estimatedGenderConfidence" : 50,
      "declaredYearOfBirth" : {
          "from" : "1960",
          "to" : "1990"
      },
      "estimatedYearOfBirth" : {
          "from" : "1980",
          "to" : "1990"
      },
      "estimatedYearOfBirthConfidence" : 50
},

感谢。

Answer 1

这样的事情：

$.fn.serializeObject = function(options) {

    var data = $(this).serializeArray(),
        obj = {};

    $.each(data, function(i, el) {
        var key = el.name;
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }
    });

    return obj;
};

你可以这样使用它：

var data = $('form').serializeObject({startDate: 'dates', endDate: 'dates'});

因此，您要在配置中说明您希望startDate字段进入dates组，依此类推。您还可以定义多个组，例如：

$('form').serializeObject({
    startDate: 'dates',
    endDate: 'dates',
    firstName: 'user',
    lastName: 'user'
});

演示：http://jsfiddle.net/dfsq/UwFTr/1/

---

UPD

对于嵌套组，插件可能如下所示：

$.fn.serializeObject = function(options) {

    function namespace(obj, keys, name, value) {
        keys = keys.split('.');
        var o = obj;
        for (var i = 0; i < keys.length; i++) {
            o[keys[i]] = o[keys[i]] || {};
            o = o[keys[i]];
        }
        o[name] = value;
        return obj;
    }

    var elements = $.makeArray($.prop(this[0], "elements")),
        obj = {};

    $.each(elements, function(i, el) {
        if (!el.name || $(el).is(":disabled")) return;

        var group = $(el).attr('group');

        if (!group) {
            obj[el.name] = $(el).val();
        }
        else {
            obj = namespace(obj, group, el.name, $(el).val());
        }
    });

    return obj;
};

在HTML中使用它：

<input type="date" name="startDate" group="event.dates" value="2014-03-26">

演示：http://jsfiddle.net/dfsq/UwFTr/2/

Answer 2

您可以使用div或其他元素对输入进行分组，并为json键使用id或数据前缀html5属性等属性。在下面的示例中，我使用$.attr()为组添加了id，并为各个输入命名。

http://jsfiddle.net/A9XvJ/