Новичок в json и javascript, помогите?

ProgramBox

Новичок в json и javascript, помогите?

Post author:admin
Запись опубликована:23 апреля, 2023
Post category:Вопросы по программированию

#javascript #json

Вопрос:

У меня есть файл 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;

    });
});

1. Это звучит как идеальный вариант использования для шаблонов jQuery .

2. круто, я это проверю. Но пока есть другие предложения?

3. Используйте Firebug из Firefox или Chrome developer tools и поместите точку останова внутри вашего блока .each и посмотрите, каково значение i . Вы также могли бы посмотреть на значение данных, чтобы убедиться, что оно соответствует вашим ожиданиям. Я ожидаю, что вам нужно перебирать данные.Однако есть вопросы.

4. Почему Questions это не просто список? например: ["I enjoy playing video games", "I enjoy reading", "I enjoy watching tv"]

Ответ №1:

Вы должны выполнить цикл data.Questions . Смотрите код ниже. Я также оптимизировал ваш код, так что HTML добавляется сразу, а не отдельно для каждого элемента.

Еще одно замечание: вам следует изменить i 1, 1 2, 1 3, etc часть на что-то более подходящее. В настоящее время это просто добавлено, потому что оно находится внутри контекста строки. Даже если вы добавите круглые скобки, логика все равно будет ошибочной: Для 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);
});

1. Мне нравится ваш код намного больше, но я получаю вопрос, который не определен в строковых вопросах. q

2. Попробуйте еще раз, со строчной q . Также взгляните на мои комментарии относительно вашей функциональной логики и отредактированного кода, который предложил лучший подход.

3. Ой, неважно, была ли моя ошибка, все выглядит хорошо, но мои ответы я получаю неопределенными с переключателем рядом

4. Вы скопировали весь мой код? Ошибка, которую вы получаете, указывает на то, что data.Questions не определено. Итак, ваш JSON может выглядеть не так, как ожидалось.

Ответ №2:

Вы неправильно обращаетесь к JSON. data.Questions.Q и data.Answers.a неверно.

Оба data.Questions и data.Answers являются массивами. Вам пришлось бы перебирать эти массивы и обращаться к ним следующим образом data.Questions[i].Q .

Или измените свой JSON в соответствии с тем, как вы хотите, чтобы код мог их повторять. Вы можете исправить одно или другое, но они должны совпадать. Мне кажется, вы хотите исправить код для вопросов и JSON для ответов, но это дизайнерское решение, которое вы можете принять.