CODEWITHSUNDEEP
javascriptjson
Mario
Mario

Reputation: 2739

New to json and javascript, help?

I have a json file which contains questions and answers like this.

{
    "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"
        }
    ]
}

The answers are always the same for each question. I am trying to do a loop in javascript to display each questiona the answers under it, something like this

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

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

right now i have this, but it doesn't really work

$.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;

    });
});

Upvotes: 1

Views: 104

Answers (2)

jfriend00
jfriend00

Reputation: 708156

You aren't accessing the JSON properly. data.Questions.Q and data.Answers.a is not correct.

Both data.Questions and data.Answers are arrays. You would have to loop through those arrays and access them like data.Questions[i].Q.

Or change your JSON to match how you want the code to be able to iterate them. You can fix one or the other, but the two must match. It looks to me like you want to fix the code for the questions and fix the JSON for the answers, but that's a design decision that you can make.

Upvotes: 0

Rob W
Rob W

Reputation: 349262

You have to loop through data.Questions. See the code below. I have also optimized your code, so that the HTML is appended at once, rather than separately for each element.

Another note: You should change the i + 1, 1 + 2, 1 + 3, etc part to something more appropriate. Currently, it's just added, because it's inside a string context. Even if you add parentheses, the logic is still flawed: For i=1, i+2 = 3. For i=2, i+1 is also 3.

I have replaced i + 1 + "' with i + "_1', to give you an idea of the right approach.

$.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);
});

Upvotes: 3

Related Questions