JavaScript - 项目没有添加到数组中

时间:2018-01-27 19:22:34

标签: javascript

我做了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(',') + ']');

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

这很有意思,因为您每次都会将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"}]
  5. 解决方案

    而不是

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

    你可以使用(使用ES6)

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