JSFiddle - React, Tailwind, and code Playground

by Wayne Humphrey

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!doctype html>
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div id="dynamic-menu" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown with icon
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Miner1</a>
    <a class="dropdown-item" href="#"><i class="fa fa-heart pull-right"></i></a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

JavaScript

$.getJSON('https://next.json-generator.com/api/json/get/VJs_LJEAN', function(data) {
    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 buildMenu = function(menu, source) {
        var isFirst = true;
        $.each(source, function() {
            if (this.label) {
                if (!isFirst) {
                    var divider = $('<div class="dropdown-divider"></div>');
                    menu.append(divider);
                }
                var parent = $('<a class="dropdown-item" href="' + this.url + '">' + this.label + '</a>');
                menu.append(parent);
                if (this.items && this.items.length > 0) {
                    $.each(this.items, function() {
                        var child = $('<a class="dropdown-item" href="' + this.url + '">' + this.label + '</a>');
                        menu.append(child);
                    });
                }
                isFirst = false;
            }
        });
    }
    var source = builddata();
   ...