Javascript 遍历JSON对象数组单选按钮

像这样的JSON在变量中与我在一起 变量选项数组=

 [{"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;
        }

var choice_div=document.getElementById（“choice_div”）；
var options\u数组=“[{\'optionText\'：\'1safsafs 1\'，\'optionDbId\'：1}，{\'optionText\'：\'1safsafs 2\'，\'optionText\'：\'1safsafs 3\'，\'optionDbId\'：3}，{\'optionText\'：'1safsafs 4\'，'optionDbId\'：4}；
console.log（选项_数组）；
console.log（options_array.length）//174而不是4来了
对于（i=0；i

但是这段代码向DIV添加了170个条目，我得到的单选按钮内容是未定义的。无法找出原因？

---

我希望这将构建4个单选按钮，其中包含4个选项，Javascript对象键区分大小写。您在对象键上输入了一些错误。

optiontext

->

optiontext

optionBid

->

optionBid

for（i=0；i

更新（2019年10月11日） 获取不正确长度的原因是您记录的是JSON字符串长度（JSON字符串中的字符数），而不是数组长度

var choice_div=document.getElementById（“choice_div”）；
//获取选项\u数组作为实际数组而不是JSON字符串
var options\u array=JSON.parse（“[{”optionText\“：\”1safsafs 1\“，\”optionBid\“：1}，{”optionText\“：”1safsafs 2\“，”optionBid\“：2}，{”optionText\“：”1safsafs 3\“，”optionBid\“：3}，{”optionText\“：”optionText\“：”1safsafs 4\“，”optionBid\”：4}”）；
对于（i=0；i

您遇到了一些有趣的错误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。

对“in”的操作数无效：当我在edgeFor中运行此循环时，显示了预期的对象，但是这些值是未定义的，我可以看到170是选项数组的长度，而不是4个。你提供了一些错误的数据吗？在你的JSON

JSON[{“optionText”：“1safsafs 1”，“optionDBD”：1}，{“optionText”：“1safsafs 2”，“optionDBD”：2}，{“optionText”：“1safsafs 3”，“optionDBD”：3}，{“optionText”：“1safsafs 4”，“optionDBD”：4}]

数组中只有四项。啊，这是因为您正在记录JSON字符串的长度，即字符串中的字符总数。