Use JSON multidimensional array to populate values in nested checkboxes

Question

I want to populate the JSON array into the nested checkboxes. Let me explain it. I have Schools data with their campuses and classes in the relavent campus. I want to assing a teacher to classes. One teacher can teach more that one classes in a campus. As I will select the school from dropdwon, all the campuses with thies assigned classes will be populated in a list.

       jQuery(function($){

        var campuses = {
                        "7":{
                            "16*Boys Campus":
                                {
                                    "13":"Class Two","19":"Class Three","21":"Class Four","22":"Class Five","23":"Class Six"
                                },
                            "11*Girls Campus":
                                {
                                    "19":"Class Three","21":"Class Four","22":"Class Five","23":"Class Six"
                                }
                            },
                        "8":{
                            "14*Boys Campus":
                                {
                                    "18":"Class One","22":"Class Five","23":"Class Six"
                                },
                            "15*Girls Campus":
                                {
                                    "18":"Class One","19":"Class Three"
                                }
                            }
                        };

            $('#school_id').on('change',function() {
                var id = $(this).val();

                // Populate campus in dropdown box
                var i = campuses[id];

                //console.log(i);
               $('#campus_id option').remove();

                if(i !== null){ 

                        $.each(i,function(k,v){

                            a = k.split("*");

                            k = a[0];                                                       
                            v = a[1];   

                            $('#campus_id')
                                .append($("Here I want Checkbox for Campus")
                                    .attr("value",k)
                                    .text(v));

                        // Here, I want to classes checkbox of relavnat campus
                        }); // main loop

                } //if condition


            }); // end on change function

        }); // end main jquery function

Here is the HTML Code

<table class="form-table" id="teacher_faculty_meta">
  <tr valign="top">
    <th scope="row"> <label for="school_id_id">College/School * </label>
    </th>
    <td><select name="teacher_faculty_meta[school_id]" id="school_id" class="regular-text">
        <option value='7'>MCS</option>
        <option value='8'>JPPS</option>
        <option value='9'>FCC</option>
        <option value='10'>Punjab</option>
      </select>
    </td>
  </tr>
  <!-- Campus / Bracnh Select Box -->
  <tr valign="top">
    <th scope="row"> <label for="campus_id">Campus / Branch</label>
    </th>
    <td><div class="nested" id="school_id">
        <ul>
          <li id="campus_id-12">
            <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id]" value="11">
            <label for="Campus Name">Campus Name</label>
            <ul>
              <li>
                <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id][]" value="Class Name">
                <label for="Class Name">Class Name</label>
              </li>
              <li>
                <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id][]" value="Class Name">
                <label for="Class Name">Class Name</label>
              </li>
            </ul>
          </li>
          <li id="campus_id-13">
            <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id]" value="11">
            <label for="Campus Name">Campus Name</label>
            <ul>
              <li>
                <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id][]" value="Class Name">
                <label for="Class Name">Class Name</label>
              </li>
              <li>
                <input type="checkbox" class="checkbox-info" name="teacher_faculty_meta[campus_id][]" value="Class Name">
                <label for="Class Name">Class Name</label>
              </li>
            </ul>
          </li>
        </ul>
      </div></td>
  </tr>
</table>

Answer 1

Hi please check below code I updated your code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var campuses = {
        "7": {
            "16*Boys Campus":
                {
                    "13": "Class Two", "19": "Class Three", "21": "Class Four", "22": "Class Five", "23": "Class Six"
                },
            "11*Girls Campus":
                {
                    "19": "Class Three", "21": "Class Four", "22": "Class Five", "23": "Class Six"
                }
        },
        "8": {
            "14*Boys Campus":
                {
                    "18": "Class One", "22": "Class Five", "23": "Class Six"
                },
            "15*Girls Campus":
                {
                    "18": "Class One", "19": "Class Three"
                }
        }
    };
    function changefunction(){
        var id = $('#school_id').val();
            var container = $("#campus");
            container.html('');
            // Populate campus in dropdown box
            var GroupedData = campuses[id];
            for (var key in GroupedData) {
                if (GroupedData.hasOwnProperty(key)) {
                    if (GroupedData[key]) {
                        if (key != "null") {
                            var htmloption=container.html()+'<label class="checkbox"><input type="checkbox" value="'+key+'">'+key;
                            htmloption += '<br/>';
                            var optionArray = Object.values(GroupedData[key]);
                            for(var i=0;i<optionArray.length;i++)
                            {
                                htmloption += '<label class="checkbox-inline"><input type="checkbox" value="' + optionArray[i] + '">' + optionArray[i] + '</label><br/>';
                            }
                            htmloption += '<label/>';
                        }
                    }
                }
                container.html(htmloption);
            }
    }
    jQuery(function ($) {

        $('#school_id').on('change', changefunction); // end on change function
        changefunction();

    }); // end main jquery function
</script>

 <table class="form-table" id="teacher_faculty_meta">
    <tr valign="top">
        <th scope="row">
            <label for="school_id_id">College/School * </label>
        </th>
        <td>
            <select name="teacher_faculty_meta[school_id]" id="school_id" class="regular-text">
                <option value='7'>MCS</option>
                <option value='8'>JPPS</option>
                <option value='9'>FCC</option>
                <option value='10'>Punjab</option>
            </select>
        </td>
    </tr>
    <!-- Campus / Bracnh Select Box -->
    <tr valign="top">
        <th scope="row">
            <label for="campus_id">Campus / Branch</label>
        </th>
        <td><div id="campus"></div></td>


    </tr>

</table>