Insert a new button option within a specific container for every array included in a JSON structure, and introduce additional buttons within the array options for each object contained within the arrays

Question

Insert a new button option within a specific container for every array included in a JSON structure, and introduce additional buttons within the array options for each object contained within the arrays

I am struggling to generate buttons for each JSON array within the given JSON object. There are 2 arrays, and I aim to add child buttons to these initial buttons for every object in the arrays (a total of 6 objects). Even though I have written some code that I believe should work, it only results in an error. Below is the JavaScript code I have used. I've been working on this for a few days now and time is running out, so any guidance or advice would be greatly appreciated.

<body>
<div id="title"> <!-output how many modules there are 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"}
        ],

javascript arrays json ajax object

Answer 1

Answer №1

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

Iterating over each i in Object.keys(json), which generates an array of keys within an object (in the form of strings). When using $.each, it requires an array or object, but you are passing the index i, which is a string (e.g. "semester1").

You have two potential solutions: either pass json[i] to $.each instead of just passing i, like this:

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

Alternatively, modify the initial for loop so that it iterates through both the array of courses and the key "i". This can be accomplished using $.each, similar to what you've done in another part of your code:

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

These adjustments should help resolve your issue. If you encounter any further errors, feel free to leave a comment and I will update my response. Additionally, please remember to include the latest version of your code that is causing the error. Thank you!

Answer 2

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

Iterating over each i in Object.keys(json), which generates an array of keys within an object (in the form of strings). When using $.each, it requires an array or object, but you are passing the index i, which is a string (e.g. "semester1").

You have two potential solutions: either pass json[i] to $.each instead of just passing i, like this:

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

Alternatively, modify the initial for loop so that it iterates through both the array of courses and the key "i". This can be accomplished using $.each, similar to what you've done in another part of your code:

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

These adjustments should help resolve your issue. If you encounter any further errors, feel free to leave a comment and I will update my response. Additionally, please remember to include the latest version of your code that is causing the error. Thank you!

Answer 3

Answer №2

In the scenario where `semester1` and similar properties are the only ones present in the primary JSON object:

$(function(){ // initialization
$.getJSON('courses.json', function(data){
  $.each(data, function(semester, courseArray){
    $.each(courseArray, function(index, courseObj){
      var button = document.createElement('input');
      button.type = 'button'; 
      button.id = semester+'_'+index; 
      $('#myButton').append(button);
      $(button).on('click', function(){
        console.log(courseObj); 
      });
    });
  });
});
}); // end of initialization

Answer 4

In the scenario where `semester1` and similar properties are the only ones present in the primary JSON object:

$(function(){ // initialization
$.getJSON('courses.json', function(data){
  $.each(data, function(semester, courseArray){
    $.each(courseArray, function(index, courseObj){
      var button = document.createElement('input');
      button.type = 'button'; 
      button.id = semester+'_'+index; 
      $('#myButton').append(button);
      $(button).on('click', function(){
        console.log(courseObj); 
      });
    });
  });
});
}); // end of initialization

Insert a new button option within a specific container for every array included in a JSON structure, and introduce additional buttons within the array options for each object contained within the arrays

Answer №1

Answer №2

Similar questions

Display a specific section depending on the user's input by utilizing either ng-if or ng-show

Convert a list to XML and JSON with Jackson serialization

Using the React context without explicitly setting the contextType or defining a default context

Sending variables to other parts of the application within stateless functional components

When the DOM elements have already been rendered, document.querySelector() will return null

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

Obtain the contenteditable span's value

Combining two JSON objects with sailsjs-nodejs to create a single merged object

What is the best way to style .json files using Brackets?

Transforming javascript's array.map into php's array_map function

What is the best way to handle errors in the front-end when receiving responses from expressjs?

"Utilize Excel VBA function to generate an array and directly input it into a worksheet

Generate a Year attribute value using the information from the year field in a JSON document

jQuery failing to trigger onClick event for a specific group of buttons

Problem with integrating React Hook Forms with Material UI Autocomplete in React app

Incorporating image hyperlinks onto a designated webpage within a JavaScript presentation carousel

CKEditor's height automatically increases as the user types

Expanding and collapsing multiple div elements easily with Javascript code

Experiencing an "isTrusted" error while working with the GLTFLoader

PHP - A guide to inserting an array at a specific index