解析json并以html输出

Question

我想使用javascript解析json文件并以html输出

这是我的json文件

{"quiz":[
    {
        "quizName":"Quiz 1",
        "question": [
            {
                "text": "1+1?",
                "choiceA": "1",
                "choiceB": "2",
            }
        ]
    },
    {
        "quizName":"Quiz 2",
        "question": [
            {
                "text": "2+2?",
                "choiceA": "3",
                "choiceA": "4",
            }
        ]
    }
]}

这是我的html

<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
  $.getJSON('data.json', function(data) {
    var output="<ul>";
    for (var i in data.quiz) {
        output+="<li>" + data.quiz[i].quizName+"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
 });
   </script>
</body>

我想以这样的列表格式显示所有“ quizName”

测验1

测验2

但是通过代码不会输出任何内容。

我是json和javascript的新手，我不知道json文件不正确还是javascript不正确。 谢谢。

Answer 1

JSON文件中对象的最后一项后不能有逗号。

更改：

"choiceB": "2",

对此：

"choiceB": "2"

对choiceA": "4",执行相同的choiceA": "4",

Answer 2

如果您不确定Json是对还是错，则可以在此处在线检查json解析器或jsonEditor

你有多余的逗号

这是正确的杰森

{"quiz":[
  {
    "quizName":"Quiz 1",
    "question": [
        {
            "text": "1+1?",
            "choiceA": "1",
            "choiceB": "2"
        }
    ]
  },
  {
    "quizName":"Quiz 2",
    "question": [
        {
            "text": "2+2?",
            "choiceA": "3",
            "choiceB": "4"
        }
    ]
  }
]}

还解析它参考解析

希望这可以帮助

Answer 3

在第9和19行删除json文件中的多余逗号。

Answer 4

您所需要的只是再做一个循环。

var output="<ul>";
for (var i in dataset) {
    for (var j in dataset[i])
    {
    output+="<li>" + dataset[i][j].quizName+"</li>";
    }
}

output+="</ul>";
document.getElementById("placeholder").innerHTML=output;

您可以在这里： http : //jsfiddle.net/baximilian/qpJjN/

Answer 5

除了答案，我想指出的是，根据JSON规范（您可以在google rfc4627上进行搜索），不应使用逗号结尾。

不过，某些浏览器将允许您执行此操作（例如chrome）。

一个提示，我总是使用IE（兼容模式下为IE7）检查尾随逗号（因为每次遇到额外的尾随逗号时都会停止加载）。

解析json并以html输出

问题描述

5 个解决方案

解决方案1
3

解决方案2
1 2014-07-03 06:35:33

解决方案3
0 2014-07-03 06:24:13

解决方案4
0 2014-07-03 06:34:22

解决方案5
0 2014-07-03 07:11:10

解析json并以html输出

问题描述

5 个解决方案

解决方案1 3

解决方案2 1 2014-07-03 06:35:33

解决方案3 0 2014-07-03 06:24:13

解决方案4 0 2014-07-03 06:34:22

解决方案5 0 2014-07-03 07:11:10

解决方案1
3

解决方案2
1 2014-07-03 06:35:33

解决方案3
0 2014-07-03 06:24:13

解决方案4
0 2014-07-03 06:34:22

解决方案5
0 2014-07-03 07:11:10