JQuery with AJAX need to create accordion with multidimensional array

I have an AJAX which returns this array:

{
"MBA" {0 → ["class_name": "1st Year", "class_code": "552"],
       1 →  ["class_name": "2nd Year", "class_code": "992"]
     },
"MCA" {0 → ["class_name": "Year 1", "class_code": "112"],
       1 →  ["class_name": "Year 2", "class_code": "446"]
     }
}

Array Preview in Console.Log

In my HTML I have an accordion:

<div class="accordion append-ajax-data" id="accordion-4" role="tablist">

</div>

In the AJAX success function, I’m getting the array. I need to append that array in the accordion which should be something like this:

<div class="accordion accordion-solid-header" id="accordion-4" role="tablist">
    <div class="card">
      <div class="card-header" role="tab">
        <h6 class="mb-0">
          <a data-toggle="collapse" href="#collapse-{counter-1}" aria-expanded="true" aria-controls="collapse-{counter-1}"> Department Name {MBA} </a>
        </h6>
      </div>
      <div id="collapse-{counter-1}" class="collapse show" role="tabpanel" aria-labelledby="heading-{counter-1}" data-parent="#accordion-4">
        <div class="card-body">
          <div class="row">
            <table> 
               <thead>
                  <tr> 
                     <th>Class Name </th>
                     <th> Class Code </th>
                  </tr>
               </thead>
               <thead>
                  <tr> 
                     <th>{class_name} 1st Year </th>
                     <th>{class_code} 552 </th>
                  </tr>
                   <tr> 
                     <th>{class_name} 2nd Year</th>
                     <th>{{class_code} 992 </th>
                  </tr>
               </thead>
          </div>
        </div>
      </div>
     <!-- Another Accordion for MCA Class with table having class names-->
    </div>

In my AJAX success function I can loop through, but I do not know a way how I can append the div having class “append-ajax-data” to append the accordion (div having “card” class).

Here is my JavaScript from Success function of AJAX.

groupedByDept = {{
"MBA" {0 → ["class_name": "1st Year", "class_code": "552"],
       1 →  ["class_name": "2nd Year", "class_code": "992"]
     },
"MCA" {0 → ["class_name": "Year 1", "class_code": "112"],
       1 →  ["class_name": "Year 2", "class_code": "446"]
     }
}};

$.each(groupedByDept, function (dept, classArr) {
                    //console.log("Department IS: "+ dept+ " Class IS :" +classArr);
                    var appendString;
                    for(var i = 0; i < classArr.length; i++) {
                        
                       // console.log('Class Name : '+ classArr[i].class_name);
                        var secArr = classArr[i]['section'];

                        $(".academics-department-class-grid").append(
                            '<div class="card"><div class="card-header" role="tab" id="class-id-'+classArr[i]['class_id']+'"><h6 class="mb-0"> <a data-toggle="collapse" href="#collapse-'+classArr[i]['class_id']+'" aria-expanded="true" aria-controls="collapse-'+classArr[i]['class_id']+'">'+dept+'</a></h6></div><div id="collapse-'+classArr[i]['class_id']+'" class="collapse show" role="tabpanel" aria-labelledby="class-id-'+classArr[i]['class_id']+'" data-parent="#accordion-4"><div class="card-body"><div class="row"><div class="col-12"><table class="table" style="border:none"><thead><tr><th> Class ID</th><th> Class Name</th><th> Class Code</th><th> Actions</th></tr></thead><tbody><tr><td> '+classArr[i]['class_id']+'</td><td> '+classArr[i]['class_name']+'</td><td> '+classArr[i]['class_code']+'</td><td> <a href="#" class=""> <i class="mdi mdi-pencil"></i></a> <a href="#" class=""> <i class="mdi mdi mdi-view-list"></i> </a></td></tr></tbody></table></div></div></div></div></div>'
                        );
                    }
                    
                });

But this code gives separate accordion for each class, I need to group it by department, I tried a lot can anyone please help.

Answer

The problem is that you are adding the whole card in the foreach loop. Try getting the card declaration outside the loop, and closing after it, then adding it to the container, like this:

// Open the card to add before the main loop.
var card = '<div class="card">';

$.each(groupedByDept, function (dept, classArr) {
    var appendString;
    for(var i = 0; i < classArr.length; i++) {
        
        var secArr = classArr[i]['section'];

        // add each accordion to the card declared outside
        card += '<div class="card-header" role="tab" id="class-id-'+classArr[i]['class_id']+'"><h6 class="mb-0"> <a data-toggle="collapse" href="#collapse-'+classArr[i]['class_id']+'" aria-expanded="true" aria-controls="collapse-'+classArr[i]['class_id']+'">'+dept+'</a></h6></div><div id="collapse-'+classArr[i]['class_id']+'" class="collapse show" role="tabpanel" aria-labelledby="class-id-'+classArr[i]['class_id']+'" data-parent="#accordion-4"><div class="card-body"><div class="row"><div class="col-12"><table class="table" style="border:none"><thead><tr><th> Class ID</th><th> Class Name</th><th> Class Code</th><th> Actions</th></tr></thead><tbody><tr><td> '+classArr[i]['class_id']+'</td><td> '+classArr[i]['class_name']+'</td><td> '+classArr[i]['class_code']+'</td><td> <a href="#" class=""> <i class="mdi mdi-pencil"></i></a> <a href="#" class=""> <i class="mdi mdi mdi-view-list"></i> </a></td></tr></tbody></table></div></div></div></div>'
    }
    
});

// close the card element
card += '</div>';

// now add it to the container
$(".academics-department-class-grid").append(card);