I needed to incorporate data from my database into my navbar dropdown.
Below is the JSON data:
{
"1": [{
"id": 1,
"moduleId": "1",
"dropdownModuleName": "NL",
"isDeleted": null,
"createdBy": "1",
"updatedBy": null,
"dateCreated": "2018-09-19 17:37:21",
"dateUpdated": null
}, {
"id": 2,
"moduleId": "1",
"dropdownModuleName": "EE",
"isDeleted": null,
"createdBy": null,
"updatedBy": null,
"dateCreated": "2018-09-19 18:01:39",
"dateUpdated": null
}, {
"id": 3,
"moduleId": "1",
"dropdownModuleName": "SA",
"isDeleted": null,
"createdBy": null,
"updatedBy": "1",
"dateCreated": "2018-09-19 18:01:46",
"dateUpdated": "2018-09-19 18:10:02"
}],
"4": [{
"id": 4,
"moduleId": "4",
"dropdownModuleName": "CON",
"isDeleted": null,
"createdBy": null,
"updatedBy": "1",
"dateCreated": "2018-09-19 18:01:56",
"dateUpdated": "2018-09-19 18:13:33"
},{
"id": 6,
"moduleId": "4",
"dropdownModuleName": "RG",
"isDeleted": null,
"createdBy": "1",
"updatedBy": null,
"dateCreated": "2018-09-19 19:13:00",
"dateUpdated": null
}],
}
With a script, I was able to display this data in the navbar dropdown. However, I encountered an issue where long lists made some links inaccessible on the screen.
To address this, I attempted to use chunkarray to divide the array. Unfortunately, converting the array to JSON resulted in it being displayed as a single list rather than divided chunks.
$.ajax({
url:'/api/navbarToggleDropdownMenu/getall',
type:'GET',
dataType:'JSON',
async:false,
success:function (res) {
for(i in res){
myKey = i;
myVal = res[i]
for(o in myVal){
nKey = o
nVal = myVal[o]
if(nVal.moduleId != undefined || nVal.moduleId != null){
$('[data-id="'+myKey+'"]').replaceWith('<li class="dropdown megamenu-fw"><a href="javascript:void(0)" class="dropdown-toggle">'+nVal.moduleName+'</a>
<ul class="dropdown-menu megamenu-content" role="menu"><li [data-div="'+myKey+'"]></li></ul></li>');
$('[data-div="'+myKey+'"]').append('<div class="col-menu col-md-3"><ul class="menu-col">
<li><a href="dropdownModule?id='+nVal.id+'">'+nVal.dropdownModuleName+'</a></li></ul></div>');
}
}
}
}
})
The desired outcome is to display the data on the navbar by dividing the list - creating another div class="col-md-3" when the list exceeds 5 items. This ensures that each col-md-3 segment properly displays part of the list.
This is how I expect the output to be displayed:
<li class="dropdown megamenu-fw">
<a href="javascript:void(0)" class="dropdown-toggle">Megamenu</a>
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
</div><!-- end col-3 -->
<div class="col-menu col-md-3">
<ul class="menu-col">
<li><a href="contact.html">Contact</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
<li><a href="authors.html">Author</a></li>
<li><a href="404.html">404</a></li>
<li><a href="about-me.html">About</a></li>
</ul>
</div><!-- end col-3 -->
<div class="col-menu col-md-3">
<ul class="menu-col">
<li><a href="contact.html">Contact</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
<li><a href="authors.html">Author</a></li>
<li><a href="404.html">404</a></li>
<li><a href="about-me.html">About</a></li>
</ul>
</div><!-- end col-3 -->
</div><!-- end row -->
</li>
</ul>
</li>