Javascript将JSON对象值作为单选按钮或列表的文本

所以我对网络编程是新手，基本上一无所知。所以如果我的行为不好，我很抱歉

我想创建一个简单的应用程序，它接受JSON对象并从中检索数据并修改HTML。我真正想做的是：

从像这样的JSON对象获取数据； 我只想在没有外部库的情况下使用vanilla javascript，所以我了解到以jQuery为例是不可能的

{
        "id" : 21,
        "question": "What is 2 + 8?",
        "alternatives": {
            "alt1": 2,
            "alt2": 8,
            "alt3": 10,
            "alt4": 28
        },
        "answer" : "alt3"
    }

例如，我可以用钥匙取

 var id = jSONobj.id

但是我如何在备选方案中迭代alts并设置单选按钮的值：

<form action="" id="input4radio">
  <input type="radio" name="ans"><br>
  <input type="radio" name="ans"><br>
  <input type="radio" name="ans"><br>
  <input type="radio" name="ans"><br>
</form>

我假设我使用for循环，但我认为javascript与我习惯的java相比非常混乱。所以我不知道怎么做这样的功能。我看到的大多数答案要么使用jQuery，要么只是从alt列表中获取值。他们不会把这些值放在任何地方

请帮忙

所以步骤可以是：

在窗口onload事件中调用JS函数 通过ID在DOM中获取表单 循环遍历数据中的“备选方案”对象 在每次迭代中创建一个输入节点 将此节点的值设置为键的值 然后将新节点附加到表单中

var data = {
    "id" : 21,
    "question": "What is 2 + 8?",
    "alternatives": {
        "alt1": 2,
        "alt2": 8,
        "alt3": 10,
        "alt4": 28
    },
    "answer" : "alt3"
}

function onLoad() {
    var form = document.getElementById('input4radio');
    for (alt in data.alternatives) {
        var newRadio = document.createElement('input'); 
        newRadio.type = 'radio';
        newRadio.value = data.alternatives[alt];
        form.appendChild(newRadio); 
        form.appendChild(document.createElement('br'));
    }

}

window.onload = onLoad;

然后在HTML中创建一个空表单：

    <form action="" id="input4radio">

---

我也有Java背景-我想你会逐渐将混乱视为灵活性：

你是动态创建DOM的吗？你控制你接收的json吗？你能做一个数组吗？一切都准备好了indexed@Rayon是的，我的DOM是动态创建的，我只是这样做。style.display='none'；取决于问题的类型。@Danny–为什么？您应该基于JSON@Danny —