JavaScript-项目未添加到数组

Question

我已经完成了jsFiddle 。 下面的一些代码。

我的预期输出是

[{
    "support_advice": [{
            "id": "A",
            "type": "checkbox",
            "text": "",
            "value": "A"
        },
        {
            "id": "C",
            "type": "checkbox",
            "text": "",
            "value": "C"
        }
    ]
}]

但是我明白了

[{
    "support_advice": [{
        "id": "C",
        "type": "checkbox",
        "text": "",
        "value": "C"
    }]
}]

我认为result[elem[i].name] = matches; 会添加另一个项目，而不是替换已经存在的项目

的HTML

<form id="rn_QuestionSubmit">
<input name="support_advice" id="A" type="checkbox" value="A" checked>
<input name="support_advice" id="B" type="checkbox" value="B">
<input name="support_advice" id="C" type="checkbox" value="C" checked>
</form>

的JavaScript

var elem = document.getElementById('rn_QuestionSubmit').elements;

            var a = [];
            var result = {};

            for(var i = 0; i < elem.length; i++)
            {
                var matches = [];
                var item = {};
                item.id = elem[i].id;
                item.type = elem[i].type;
                if (elem[i].type === 'select-one') {
                    item.text = document.getElementById(elem[i].id).options[document.getElementById(elem[i].id).selectedIndex].text;
                }
                else {
                    item.text = '';
                }

                if (elem[i].type === 'radio' || elem[i].type === 'checkbox') {
                    if (document.getElementById(elem[i].id).checked) {

                        item.value = document.getElementById(elem[i].id).value;
                        matches.push(item);
                        result[elem[i].name] = matches;
                    }
                }
                else {
                    item.value = elem[i].value;
                    matches.push(item);
                    result[elem[i].name] = matches;
                }
            } 

            a.push(JSON.stringify(result));
            console.log('['+a.join(',') + ']');
            return('['+a.join(',') + ']');

Answer 1

许多不需要的代码可以在这里清理...

var elem = document.getElementById('rn_QuestionSubmit').elements;

        var a = [];
        var result = {};

        for(var i = 0; i < elem.length; i++)
        {
            var element = elem[i];
            var item = {};
            item.id = element.id;
            item.type = element.type;
            if (element.type === 'select-one') {
                item.text = element.options[element.selectedIndex].text;
            }
            else {
                item.text = '';
            }

            if (element.type === 'radio' || element.type === 'checkbox') {
                if (element.checked) {
                    item.value = element.value;
                    if (result[element.name]) { result[element.name].push(item) } else { result[element.name] = [item]};
                }
            }
            else {
                item.value = elem[i].value;
                if (result[element.name]) { result[element.name].push(item) } else { result[element.name] = [item]};
            }
        } 

        a.push(JSON.stringify(result));
        console.log('['+a.join(',') + ']');
        return('['+a.join(',') + ']');

您实际上需要决定在每个元素上推入或创建一个新数组。

小提琴： https : //jsfiddle.net/0jhyj4wv/

Answer 2

这是因为appening要指定的matches每次阵列support_advicce属性。

为了确定发生了什么，您可以将此console.log到您的代码中：

console.log("before", result[elem[i].name]);
result[elem[i].name] = matches;
console.log("after", result[elem[i].name]);

您将获得：

1. before undefined
2. after [0: {id: "A", type: "checkbox", text: "", value: "A"}]
3. before [0: {id: "A", type: "checkbox", text: "", value: "A"}]
4. after [0: {id: "C", type: "checkbox", text: "", value: "C"}]

解

代替

result[elem[i].name] = matches;

您可以使用（使用ES6）

if(typeof result[elem[i].name] === "undefined") result[elem[i].name] = [];          
result[elem[i].name].push(...matches);