遍历JSON对象数组单选按钮

Question

这样的JSON与我一起位于变量中var options_array =

 [{"optionText":"1safsafs 1","optionDbId":1},{"optionText":"1safsafs 2","optionDbId":2},{"optionText":"1safsafs 3","optionDbId":3},{"optionText":" 1safsafs 4","optionDbId":4}]

我必须使用此JSON中的项目构建一个单选按钮，并且我正在使用以下代码

             var choice_div = document.getElementById("choice_div");    

            var options_array = "[{\"optionText\":\"1safsafs 1\",\"optionDbId\":1},{\"optionText\":\"1safsafs 2\",\"optionDbId\":2},{\"optionText\":\"1safsafs 3\",\"optionDbId\":3},{\"optionText\":\" 1safsafs 4\",\"optionDbId\":4}]";

            console.log(options_array);
             console.log(options_array.length); //174 is coming here  instead of 4 

            for (i = 0; i < options_array.length; i++) {
                var _text = JSON.stringify(options_array[i].optionText);
                //console.log(_text);  //all values are coming as undefined 
                var _value = JSON.stringify(options_array[i].optionDbId);
                //console.log(_value);

                var option_entry = makeRadioButton("selectedoption", _value, _text);
                choice_div.appendChild(option_entry);
            }
        function makeRadioButton(name, value, text) {

            var label = document.createElement("label");
            var radio = document.createElement("input");
            radio.type = "radio";
            radio.name = name;
            radio.value = value;

            label.appendChild(radio);

            label.appendChild(document.createTextNode(text));
            return label;
        }

但是此代码将170个项目添加到DIV中，而我正在获取未定义的单选按钮内容。无法找到原因？我期望它可以构建4个带有4个选项的单选按钮

Answer 1

您有一些有趣的错误XD，首先这是工作中的一个

$(document).ready(function () {
    var choice_div = document.getElementById('mydiv');
    data = [{ "optionText": "1safsafs 1", "optionDbId": 1 }, { "optionText": "1safsafs 2", "optionDbId": 2 }, { "optionText": "1safsafs 3", "optionDbId": 3 }, { "optionText": " 1safsafs 4", "optionDbId": 4 }]
    $.each(data, function (key, item) {
        var text = item.optionText;

        var value = item.optionDbId;
        console.log(value);
        var option_entry = makeRadioButton("option" + key, value, text);
        choice_div.appendChild(option_entry);
    });
});
function makeRadioButton(name, value, text) {

    var label = document.createElement("label");
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = name;
    radio.value = value;
    label.appendChild(radio);
    console.log("bot "+value);
    label.appendChild(document.createTextNode(text));
    return label;
}

然后让我们先检查一下您做了什么，无缘无故地使用了JSON.stringify（），其次您输入了错误的JSON键，那是个有趣的XD。

Answer 2

Javascript对象键区分大小写。您已经在对象键上打了一些错字。optiontext->optionTextoptiondbid-> optionDbId

for (i = 0; i < options_array.length; i++) {
    var _text = JSON.stringify(options_array[i].optionText);
    //console.log(_text);
    var _value = JSON.stringify(options_array[i].optionDbId);
    //console.log(_value);

    var option_entry = makeRadioButton("option" + i,_value, _text);
    choice_div.appendChild(option_entry);
}

更新（11/10/2019）

获得错误长度的原因是因为您正在记录JSON字符串长度（JSON字符串中的字符数）而不是数组长度。

var choice_div = document.getElementById("choice_div");    

// Get options_array as actual array instead of JSON string
var options_array = JSON.parse("[{\"optionText\":\"1safsafs 1\",\"optionDbId\":1},{\"optionText\":\"1safsafs 2\",\"optionDbId\":2},{\"optionText\":\"1safsafs 3\",\"optionDbId\":3},{\"optionText\":\" 1safsafs 4\",\"optionDbId\":4}]");

for (i = 0; i < options_array.length; i++) {
    // Dont need to stringify here
    var _text = options_array[i].optionText;
    var _value = options_array[i].optionDbId;

    var option_entry = makeRadioButton("selectedoption", _value, _text);
    choice_div.appendChild(option_entry);
}

function makeRadioButton(name, value, text) {
    var label = document.createElement("label");
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = name;
    radio.value = value;

    label.appendChild(radio);

    label.appendChild(document.createTextNode(text));
    return label;
}