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

Question

我正在尝试为每个带有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"}
        ],

Answer 1

for (var i in Object.keys(json))

遍历Object.keys(json)每个i ，该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);
                })
            })
         })
    })
...

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

Answer 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

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

问题描述

2 个解决方案

解决方案1
0 2019-04-17 22:17:07

解决方案2
0 2019-04-17 22:56:43

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

问题描述

2 个解决方案

解决方案1 0 2019-04-17 22:17:07

解决方案2 0 2019-04-17 22:56:43

解决方案1
0 2019-04-17 22:17:07

解决方案2
0 2019-04-17 22:56:43