javascript - 在javascript中将JSON列表合并为一个JSON

Question

我有一个 HTML 表单，我试图在提交时使用 javascript 将其内容字符串化并解析为 JSON

例如:

<form id="form1" enctype="multipart/form-data">
    <input type="hidden" name="presented" value="1" />
    <input type="checkbox" name="RESPONSE" value="ch1">ch1</input>
    <input type="checkbox" name="RESPONSE" value="ch2">ch2</input>
    <input type="checkbox" name="RESPONSE" value="ch3">ch3</input>

    <input id="submit_button" name="submit" type="submit"/>
</form>

和javascript:

 $(document).ready(function () {
    $("#submit_button").click(function (e) {
        e.preventDefault();
        var formData = JSON.parse(JSON.stringify(jQuery('#form1').serializeArray()));
        alert(JSON.stringify(formData));
    });
});

我得到这样的输出(考虑到只有前两个复选框被选中):

[{"name":"presented","value":"1"},
 {"name":"RESPONSE","value":"ch1"},
 {"name":"RESPONSE","value":"ch2"}]

但我希望在一个 JSON 中得到这样的结果，其中包含用于重复键的数组:

{"presented" : "1", "RESPONSE" : ["ch1", "ch2"]}

jsfiddle here

Answer 1

您需要编写自己的序列化程序。例如，要对具有相同名称的元素的值进行分组，您可以使用 Array.prototype.reduce 执行以下操作:

$("#submit_button").click(function (e) {
    e.preventDefault();
    var formData = jQuery('#form1').serializeArray().reduce(function(prev, curr) {
        if (prev.hasOwnProperty(curr.name)) {
            prev[curr.name] = $.isArray(prev[curr.name]) ? prev[curr.name] : [prev[curr.name]]
            prev[curr.name].push(curr.value);
        }
        else {
            prev[curr.name] = curr.value;
        }
        return prev;
    }, {});
    document.querySelector('pre').innerHTML = JSON.stringify(formData, null, 4);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" enctype="multipart/form-data">
    <input type="hidden" name="presented" value="1" />
    <input type="checkbox" name="RESPONSE" value="ch1">ch1</input>
    <input type="checkbox" name="RESPONSE" value="ch2">ch2</input>
    <input type="checkbox" name="RESPONSE" value="ch3">ch3</input>
    
    <input id="submit_button" name="submit" type="submit"/>
</form>

<pre></pre>