如何将数据从JavaScript文件动态附加到html文件

Question

I have to build JS multi select questionnaire.

In order to read the json details I use the following code:

$(document).ready(function(){
    $.getJSON("data.json", function(json) {
        var anserFor1st = json.questions[0].answers;
        var anserFor2nd = json.questions[1].answers;//If it's more than two use a loop
        document.getElementById("content").innerHTML =  JSON.stringify(anserFor1st) + "<br/>" + JSON.stringify(anserFor2nd);
        var aString = "";
        Object.keys(anserFor1st).forEach(function (k) {aString += anserFor1st[k] + "<br/>";});
        Object.keys(anserFor2nd).forEach(function (k) {aString += anserFor2nd[k] + "<br/>";});
        document.getElementById("content").innerHTML = aString;
    });
});

I have to shoe all of the questions&answers in the same page but every time with different content (aka question&answer). I have to move between questions by back and forward buttons. How do I display the values of the different question dynamically in the html?

Answer 1

If you have all the questions in a list, as it appears you do, the jQuery to dynamically change the question content is pretty trivial. We can create a function, and pass parameters to the function telling it to move forwards or backwards in the array of questions, as long as it doesn't extend outside the array. An example of this is here .

var testArray = ["first q", "second q", "third q", "fourth q"];
var questionIndex = 0;

function updateQuestion(direction) {
    questionIndex += direction;
    if (questionIndex < testArray.length && questionIndex >= 0) {
        $(".question").html(testArray[questionIndex]);
    } else {
        questionIndex -= direction;
    }
}

$(document).ready(function () {
    updateQuestion(0);
});

You should be able to loop through your questions and append the JSON data to a blank array in place of testArray .