json 使用Javascript生成HTML重叠列表

slmsl1lt  于 2022-11-19  发布在  Java
关注(0)|答案(1)|浏览(134)

我已经使用JSON.parse解析了以下JSON代码:

{
    "quiz": {
        "q1": {
            "question": "Which one is correct team name in NBA?",
            "options": [
                "New York Bulls",
                "Los Angeles Kings",
                "Golden State Warriros",
                "Huston Rocket"
            ],
            "answer": "Huston Rocket"
        },
        "q2": {
            "question": "'Namaste' is a traditional greeting in which Asian language?",
            "options": [
                "Hindi",
                "Mandarin",
                "Nepalese",
                "Thai"
            ],
            "answer": "Hindi"
        },
        "q3": {
            "question": "The Spree river flows through which major European capital city?",
            "options": [
                "Berlin",
                "Paris",
                "Rome",
                "London"
            ],
            "answer": "Berlin"
        },
        "q4": {
            "question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?",
            "options": [
                "Pablo Picasso",
                "Vincent van Gogh",
                "Salvador Dalí",
                "Edgar Degas"
            ],
            "answer": "Pablo Picasso"
        }
    }
}

现在,我需要生成一个测验,看起来应该是这样的:

问题1:哪个是NBA中正确的球队名称?

  • 纽约公牛
  • 洛杉矶国王队
  • 金州勇士队
  • 休士顿火箭队

非常感谢您的帮助!
这是创建一个列表的脚本代码。我还在body中包括:<div id="container"></div>

var list = document.createElement("ul");
for (let i in data) {
    let item = document.createElement("li");
    let subitem = document.createElement("strong");
    subitem.innerHTML = i;
    list.appendChild(item);
    item.appendChild(subitem);            
    let sublist = document.createElement("ul");
    item.appendChild(sublist);
    for (let j in data[i]) {
        subitem = document.createElement("li");
        subitem.innerHTML = j;
        sublist.appendChild(subitem); 
    }
}
document.getElementById("container").appendChild(list);

相反,我在浏览器中看到了以下内容:

  • 小测验

1.第一季度
1.第二季度
1.第三季度
1.第四季度

9o685dep

9o685dep1#

这里我解决这个问题。
你循环了dir的错误部分。你必须说for (questionId in data["quiz"]),否则你将循环整个数据,而不仅仅是测验。
请清理你的代码和名称变量。)
第一个

相关问题