带有AJAX的JQuery需要创建具有多维数组的折叠面板

Question

我有一个AJAX，它返回这个数组：

{
"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

在我的HTML中，我有一个手风琴：

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

</div>

在AJAX成功函数中，我获得了数组。我需要将该数组附加到accordion中，它应该是这样的：

<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>

在我的AJAX成功函数中，我可以遍历，但我不知道如何附加具有" append -ajax-data“类的div来附加accordion (具有"card”类的div)。

这是我的来自AJAX的成功函数的JavaScript。

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>'
                        );
                    }
                    
                });

但是这个代码为每个类提供了单独的手风琴，我需要按部门对其进行分组，我尝试了很多，有人可以帮助我吗？

Answer 1

问题是您在foreach循环中添加了整个卡片。尝试在循环外部获取卡片声明，并在它之后关闭，然后将其添加到容器中，如下所示：

// 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);