我有一项任务，但我不知道如何完成它。 有一个带有 在这之间我必须放置一个包含 JSON 文件数据的表单。我可以在 .js 文件(使用 jQuery)中写入，但不能在 json 或 html 文件中写入。 我希望输出是带有 ul 和 li 以及单选按钮的表单。 但我什至无法将问题本身作为输出，也不知道该尝试什么
json 文件:
[
{
id: "cat1",
title: "title 1",
conditional: false,
questions: [
{id: "q1a", title: "question"},
{id: "q1b", title: "question"},
{id: "q1c", title: "question"},
{id: "q1d", title: "question"},
{id: "q1e", title: "question"},
{id: "q1f", title: "question"},
{id: "q1g", title: "question"}
]
},
{
id: "cat2",
title: "title 2",
conditional: false,
questions: [
{id: "q2a", title: "question"},
{id: "q2b", title: "question"}
]
},
{
id: "cat3",
title: "title",
conditional: true,
questions: [
{id: "q3a", title: "question"},
{id: "q3b", title: "question"},
{id: "q3c", title: "question"},
{id: "q3d", title: "question"}
]
}
]
最后一个类别问题必须仅在该类别回答"is"时显示。
现在我的 .js (jQuery) 为:
$.getJSON( "data/questionaire.json", function(data) {
$.each(data, function(key, category) {
var ul = $('<ul />');
$.each(data.categories, function(category,questions) {
ul.append( $('<li />', {text: questions.title}) );
});
$("div #questionnaire").append(ul);
}); });
div 周围的 HTML:
<div id="leftPanel">
<h1>03 Complaints</h1>
<!-- Questionnaire placeholder -->
<div id="questionnaire">
</div>
最佳答案
首先，您的 json(如果您已逐字复制)实际上并不是有效的 json，因此您可能无法正确解析它。对象键应该用引号括起来，如下所示:
[
{
"id": "cat1",
"title": "title 1",
"conditional": false,
"questions": [
{"id": "q1a", "title": "question"},
{"id": "q1b", "title": "question"},
{"id": "q1c", "title": "question"},
{"id": "q1d", "title": "question"},
{"id": "q1e", "title": "question"},
{"id": "q1f", "title": "question"},
{"id": "q1g", "title": "question"}
]
},
{
"id": "cat2",
"title": "title 2",
"conditional": false,
"questions": [
{"id": "q2a", "title": "question"},
{"id": "q2b", "title": "question"}
]
},
{
"id": "cat3",
"title": "title",
"conditional": true,
"questions": [
{"id": "q3a", "title": "question"},
{"id": "q3b", "title": "question"},
{"id": "q3c", "title": "question"},
{"id": "q3d", "title": "question"}
]
}
]
另外，我的猜测是data.categories实际上并不存在于您当前所在的范围内。尝试以下操作:
$.each(data, function(categoryIndex, category) {
var ul = $('<ul />');
$.each(category.questions, function(questionIndex, question) {
ul.append( $('<li />', {text: question.title}) );
});
$("div #questionnaire").append(ul);
});
我重命名了一些变量，以便更清楚地了解当前迭代的位置。
这是一个working fiddle .
更新
确保您的脚本在 DOM 加载完成后运行。您可以通过将脚本标记放在 结尾 <body> 之前来完成此操作。像这样的标签:
<!-- other html above this -->
<script src="path/to/script.js"></script>
</body>
或者您可以将整个脚本包装在 jQuery ready 中方法如下:
$( function() {
/* here's your entire code */
});
关于javascript - 使用 jQuery getJSON 将多维对象 JSON 转换为 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34198903/