我正在尝试为JSON对象中的每个JSON数组创建一个按钮。有 2 个数组。然后，我想将子按钮附加到数组中每个对象的这 2 个按钮上(每个按钮有 6 个(。我已经编写了这段代码，它在我的脑海中应该可以工作，但它没有，它只会产生错误。我将包括我的JS代码。我已经尝试了几天，但时间真的不多了，所以任何建议都会很棒。
<body>
<div id="title"> <!--print how many modules altogether here with .length-->
</div>
<div id="nav">
</div>
<script>
$( document ).ready(function() {
$.getJSON( "courses.json", function( json ) {
for (var i in Object.keys(json)) {
var btn = document.createElement("BUTTON");
document.getElementById("nav").appendChild(btn);
btn.id = "myBtn";
$.each(i, (function(j) {
var btns = document.createElement("BUTTON");
document.getElementById("myBtn").appendChild(btns);
}))
}
})
})
</script>
</body>
/JSON：
{
"semester1": [
{"code":"CS6100",
"title":"Multimedia Authoring",
"Credit Weighting":5,
"Content":"Programming in Processing",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6100"},
{"code":"CS6101",
"title":"Web Development for Digital Media",
"Credit Weighting":5,
"Content":"Web Development with programming in Client and Server Side Languages",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6101"},
{"code":"CS6102",
"title":"Graphics for Interactive Media",
"Credit Weighting":5,
"Content":"Programming in Python. The principles, practices, technologies and critical frameworks associated with the practice of graphic design for digital media. Develop understanding of the creative and technical aspects of image capture, editing and manipulation. Production of graphics for digital media using industry-standard tools.",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6102"},
{"code":"CS6103",
"title":"Audio and Sound Engineering",
"Credit Weighting":5,
"Content":"Introduction to the technologies and techniques used in digital audio. Physics of sound and the psycho-physiological basis of hearing. Sound engineering, production and post-production.",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6103"},
{"code":"CS6104",
"title":"Digital Video Capture and Packaging",
"Credit Weighting":5,
"Content":"Develop understanding of the planning, production and post-production of digital video. Application and evaluation of industry-standard tools in capturing, processing and packaging digital video.",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6104"},
{"code":"CS6111",
"title":"3D Graphics and Modelling",
"Credit Weighting":5,
"Content":"Tools, techniques and processes involved in 3D graphics design, modelling and rendering. Create appropriate models of 3D objects and scenes. Solving problems in curve, surface and solid modeling.",
"Assessment":{"CA":40,"exam":60},
"link":"https://www.ucc.ie/admin/registrar/modules/?mod=CS6111"}
],
for (var i in Object.keys(json))
遍历 Object.keys(json) 中的每个i，返回对象中的键数组(作为字符串(。 $.each需要一个数组或对象，但你i它传递索引，这是一个字符串(如"semester1"(。
所以你有两个选择：要么json[i]传递给$.each，要么只传递i，像这样：
...
$( document ).ready(function() {
$.getJSON( "courses.json", function( json ) {
for (var key in Object.keys(json)) {
var btn = document.createElement("BUTTON");
document.getElementById("nav").appendChild(btn);
btn.id = "myBtn";
$.each(json[key], function(index, course) {
var btns = document.createElement("BUTTON");
document.getElementById("myBtn").appendChild(btns);
})
}
})
})
...
或者，您可以更改第一个for循环，以便它遍历课程数组本身以及键"i"。您可以使用 $.each 执行此操作，就像您在程序的其他部分中所做的那样：
...
$( document ).ready(function() {
$.getJSON( "courses.json", function( json ) {
$.each(json, function(key, semester_courses) {
var btn = document.createElement("BUTTON");
document.getElementById("nav").appendChild(btn);
btn.id = "myBtn";
$.each(semester_courses, function(index, course) {
var btns = document.createElement("BUTTON");
document.getElementById("myBtn").appendChild(btns);
})
})
})
})
...
我认为这将帮助您解决问题。如果您仍然收到错误，请发表评论，我会更新我的答案。另外，请使用产生错误的最新版本的代码更新您的问题。谢谢！
假设semester1等是你得到的主JSON对象中的唯一属性：
$(function(){ // load
$.getJSON('courses.json', function(json){
$.each(json, function(semester, array){
$.each(array, function(index, obj){
var b = document.createElement('input'); // not a submit button - I just prefer this style
b.type = 'button'; b.id = semester+'_'+index; $('#myButton').append(b);
$(b).on('click', function(){
console.log(obj); // should be the Object
});
});
});
});
}); // end load