为JSON对象中的每个数组添加(子) button元素到div，并为数组中的每个对象添加子按钮(到数组按钮
为JSON对象中的每个数组添加(子) button元素到div，并为数组中的每个对象添加子按钮(到数组按钮
提问于 2019-04-18 04:37:26
我正在尝试使用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"}
],回答 2
Stack Overflow用户
发布于 2019-04-18 06:17:07
for (var i in Object.keys(json))遍历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);
})
})
})
})
...我认为这会帮助你解决你的问题。如果你仍然收到错误，请留下评论，我会更新我的答案。另外，请使用产生错误的代码的最新版本更新您的问题。谢谢!
Stack Overflow用户
发布于 2019-04-18 06:56:44
假设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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55735622
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号