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

我认为您的新对象的值应该始终是一个数组以保持一致性。以下是如何构建它：

var arr = [{"name":"presented","value":"1"},
 {"name":"RESPONSE","value":"ch1"},
 {"name":"RESPONSE","value":"ch2"}];

var newObj = {};
arr.forEach(function(item){
    if(!newObj.hasOwnProperty(item.name)){
        newObj[item.name] = [];
    }

    newObj[item.name].push(item.value);
});

这里有一种方法可以像你想要的那样构建它：

var newObj = {};
arr.forEach(function (item) {
    if (!newObj.hasOwnProperty(item.name)) {
        newObj[item.name] = item.value;
    } else {
        if (Object.prototype.toString.call(newObj[item.name]) !== '[object Array]') {
            var newItem = newObj[item.name];
            newObj[item.name] = [newItem];
        }
        newObj[item.name].push(item.value);
    }
});

Answer 2

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

＆＃13;

$("#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);
});

＆＃13;

<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>

＆＃13;

Answer 3

考虑JSON解析库以外的其他内容。它是一个非常简单的Java程序，使用String.split（）方法将Json String转换为name＆gt;没有使用任何图书馆。

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

3 个答案: