Добавьте (дочерний) элемент кнопки в div для каждого массива в объекте JSON и добавьте дочерние кнопки (для кнопок массива) для каждого объекта в массивах - PullRequest
Новая
       5

Добавьте (дочерний) элемент кнопки в div для каждого массива в объекте JSON и добавьте дочерние кнопки (для кнопок массива) для каждого объекта в массивах

1 голос
/ 17 апреля 2019

Я пытаюсь создать кнопку для каждого массива 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"}
        ],

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

Предполагая, что 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
0 голосов
/ 18 апреля 2019 
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);
                })
            })
         })
    })
...

Я думаю, что это поможет вам решить вашу проблему.Если вы все еще получаете ошибки, просто оставьте комментарий, и я обновлю свой ответ.Также, пожалуйста, обновите ваш вопрос самой последней версией вашего кода , которая выдает ошибку.Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...