遍历 JSON object 数组单选按钮

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

但是这段代码向 DIV 添加了 170 个项目，并且我将单选按钮内容设置为未定义。 无法找出原因？ 我希望这会构建 4 个单选按钮，其中包含 4 个选项

Answer 1

Javascript Object 键区分大小写。 您在 object 键上输入了一些拼写错误。 optiontext -> optionText optiondbid -> 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);
}

更新（2019 年 11 月 10 日）

长度不正确的原因是因为您正在记录 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;
}

Answer 2

你有一些有趣的错误 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。