为JSON对象中的每个数组添加一个（子）按钮元素到div，并为数组中的每个对象添加子按钮（到数组按钮）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为JSON对象中的每个数组添加一个（子）按钮元素到div，并为数组中的每个对象添加子按钮（到数组按钮）相关的知识，希望对你有一定的参考价值。
我正在尝试使用JSON对象为每个JSON数组创建一个按钮。有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))
迭代i中的每个Object.keys(json)，它返回一个对象中的键数组（作为字符串）。 $.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
以上是关于为JSON对象中的每个数组添加一个（子）按钮元素到div，并为数组中的每个对象添加子按钮（到数组按钮）的主要内容，如果未能解决你的问题，请参考以下文章
如何将具有元素数组的每个对象的对象列表转换为具有子元素作为属性的对象数组