javascript - json 和 javascript 的新手，有帮助吗？

Question

我有一个 json 文件，其中包含这样的问题和答案。

{
    "Questions": [
        { "Q": "I enjoy playing video games" },
        { "Q": "I enjoy reading" },
        { "Q": "I enjoy watching tv" }
    ],

    "Answers": [
        {
            "a": "Strongly Agree",
            "b": "Agree",
            "c": "Neutral",
            "d": "Disagree",
            "e": "Strongly Disagree"
        }
    ]
}

每个问题的答案总是相同的。我试图在 javascript 中做一个循环来显示每个问题下面的答案，就像这样

1.I enjoy video games
RadioButton:Strongly agree   RadioButton:Agree  etc...

2. I enjoy reading
RadioButton:Strongly agree   RadioButton:Agree  etc...

现在我有这个，但它并没有真正起作用

$.getJSON("questions.json",function(data)
{
    $.each(data, function(i,data)
    {
        var div = document.createElement("div");
        div.setAttribute("id", i);
        document.createElement("div").setAttribute("id", i);

        var div_data = "<div class='questions'><h2>" + data.Questions.Q +"</h2><br />"+

        "<input type='radio' name='q" + i + "' id='q" + i + 1+"' value='"+data.Answers.a+"'/>" +
        "<label for='q" + i + 1+"'>" + data.Answers.a + "</label>"+

        "<input type='radio' name='q" + i + "' id='q" + i + 2+"' value='"+data.Answers.b+"'/>" +
        "<label for='q" + i + 2+"'>" + data.Answers.b + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + 3+"' value='"+data.Answers.c+"'/>" +
        "<label for='q" + i + 3+"'>" + data.Answers.c + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + 4+"' value='"+data.Answers.d+"'/>" +
        "<label for='q" + i + 4+"'>" + data.Answers.d + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + 5+"' value='"+data.Answers.e+"'/>" +
        "<label for='q" + i + 5+"'>" + data.Answers.e + "</label>"

        +"</div>" ;

        document.getElementById("box").appendChild(div);
        div.innerHTML = div_data;

    });
});

Answer 1

您必须遍历 data.Questions。请参阅下面的代码。我还优化了您的代码，以便立即附加 HTML，而不是为每个元素单独附加。

另一个注意事项:您应该将 i + 1, 1 + 2, 1 + 3, etc 部分更改为更合适的内容。目前，它只是被添加，因为它在字符串上下文中。即使加上括号，逻辑仍然有缺陷:For i=1, i+2 = 3。对于 i=2，i+1 也是 3。

我已将 i + 1 + "' 替换为 i + "_1'，让您了解正确的方法。

$.getJSON("questions.json",function(data)
{
    var html = "";
    $.each(data.Questions, function(i, question)
    {

        html += "<div id=" + i + ">" +
        "<div class='questions'><h2>" + question.Q +"</h2><br />"+

        "<input type='radio' name='q" + i + "' id='q" + i + "_1' value='"+data.Answers.a+"'/>" +
        "<label for='q" + (i + "_1'>" + data.Answers.a + "</label>"+

        "<input type='radio' name='q" + i + "' id='q" + i + "_2' value='"+data.Answers.b+"'/>" +
        "<label for='q" + i + "_2'>" + data.Answers.b + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + "_3' value='"+data.Answers.c+"'/>" +
        "<label for='q" + i + "_3'>" + data.Answers.c + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + "_4' value='"+data.Answers.d+"'/>" +
        "<label for='q" + i + "_4'>" + data.Answers.d + "</label>" +

        "<input type='radio' name='q" + i + "' id='q" + i + "_5' value='"+data.Answers.e+"'/>" +
        "<label for='q" + i + "_5'>" + data.Answers.e + "</label>"

        + "</div></div>" ;
    });
    $("#box").append(html);
});