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