为 JSON 对象中的每个数组添加一个（子）按钮元素到 div，并为数组中的每个对象添加子按钮（到数组按钮）答案

【问题标题】：Add a (child) button element to a div for each array in a JSON object, and add child buttons (to the array buttons) for each object within the arrays为 JSON 对象中的每个数组添加一个（子）按钮元素到 div，并为数组中的每个对象添加子按钮（到数组按钮）
【发布时间】：2019-09-08 04:14:40
【问题描述】：

我正在尝试使用 JSON 对象为每个 JSON 数组创建一个按钮。有2个数组。然后，我想为数组中的每个对象（每个对象有 6 个）将子按钮附加到这 2 个按钮上。我已经编写了这段代码，它在我的脑海中应该可以工作，但它没有，它只会产生一个错误。我将包括我的 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"}
        ],

【问题讨论】：

错误是什么？
ids 应该是唯一的
并将“BUTTON”元素改为小写
TypeError: 'in' 的右侧应该是一个对象，得到字符串.. 它指的是我在顶部采购的 jquery 库，我想这一定意味着某些东西非常我的代码错误
是的，我想设置它们的类名，但需要它们是 id，所以我可以附加到它们

标签： javascript arrays json ajax object

【解决方案1】：

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);
                })
            })
         })
    })
...

我认为这将帮助您解决问题。如果您仍然遇到错误，请发表评论，我会更新我的答案。另外，请使用产生错误的最新版本的代码更新您的问题。谢谢！

【讨论】：

【解决方案2】：

假设 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

【讨论】：