JSON Bootstrap Dropdown

by Wayne Humphrey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="menuL1" aria-expanded="false">Menu <span class="caret"></span></a>
		<div class="dropdown-menu" aria-labelledby="menuL1">
		<a class="dropdown-item" href="#">Sub1</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Sub2</a>
		<a class="dropdown-item" href="#">Sub3</a>
	</div>
</li>

  <div class="dropdown">
    <a href="" class="btn dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu json-menu">
    </ul>
  </div>

JavaScript

//load JSON file
$.getJSON('https://next.json-generator.com/api/json/get/EyBBs57RE', function(data) {
//build menu
var builddata = function () {
    var source = [];
    var items = [];
    for (i = 0; i < data.length; i++) {
        var item = data[i];
        var label = item["name"];
        var parentid = item["parent_id"];
        var id = item["id"];
        var url = item["url"];

        if (items[parentid]) {
            var item = { parentid: parentid, label: label, url: url, item: item };
            if (!items[parentid].items) {
                items[parentid].items = [];
            }
            items[parentid].items[items[parentid].items.length] = item;
            items[id] = item;
        }
        else {
            items[id] = { parentid: parentid, label: label, url: url, item: item };
            source[id] = items[id];
        }
    }
    return source;
}

var buildUL = function (parent, items) {
    $.each(items, function () {
        if (this.label) {
            var li = $("<li class='js-menu'>" + "<a href='"+ this.url +"'>" + this.label + "</a></li>");
            li.appendTo(parent);
            if (this.items && this.items.length > 0) {
                var ul = $("<ul class='dropdown-menu js-menu'></ul>");
                ul.appendTo(li);
                buildUL(ul, this.items);
            }
        }
    });
}
var source = builddata();
var ul = $(".json-menu");
ul.appendTo(".json-menu");
buildUL(ul, source);
//add bootstrap classes
if ($(".json-menu>li:has(ul.js-menu)"))
{
    $(".json-menu>li.js-menu").addClass('dropdown-submenu');
}
if ($(".json-menu>li>ul.js-menu>li:has(> ul.js-menu)"))
{
    $(".json-menu>li>ul.js-menu li ").addClass('dropdown-submenu');
}
$("ul.js-menu").find("li:not(:has(> ul.js-menu))").removeClass("dropdown-submenu");
});