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",

执行相同的操作

Answer 2

如果您不确定Json是对还是错，您可以在线查看json Parser 或jsonEditor

你有额外的逗号

这是正确的Json

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

另外解析它REFER parsing in fiddle

希望这有助于

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规范（你可以谷歌rfc4627），应该没有尾随逗号。

虽然，有些浏览器会允许你这样做（比如chrome）。

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

在html中解析json和输出

5 个答案: