Question

所以我是网络编程的新手，基本上什么都不知道。所以，如果我的做法很糟糕，我很抱歉。

我想创建一个简单的应用程序，它接受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-list中获取值。他们没有把价值放在任何地方。

请帮忙！

Answer 1

所以步骤可能是：

在窗口onload事件上调用JS函数
通过ID ID
遍历数据中的'alternative'对象
在每次迭代时创建一个输入节点
将此节点的值设置为键的值

然后将新节点附加到表单

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背景 - 我认为你会把混乱视为灵活性：）

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

1 个答案: