JSON Bootstrap Dropdown

JSON Bootstrap Dropdown

by Wayne Humphrey

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="jumbotron">
  <h1>Polo Events</h1>

  <div class="btn-group" role="group" aria-label="">
    <button type="button" class="btn btn-default"><i class="fa fa-bookmark-o"></i> Book</button>
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i> My Diary</button>

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <i class="fa fa-trophy"></i> Coming Events
      <span class="caret"></span>
    </button>
    <ul class='dropdown-menu' role='menu'></ul>
  </div>
</div>

JavaScript

$(function() {
  var data3 = 'https://next.json-generator.com/api/json/get/Vk7kt5XR4';
  var data = {
    menu: [{
      name: 'Newmarket',
      link: '1',
      sub: [{
        name: 'Race One',
        link: '0-0',
        sub: null
      }, {
        name: 'Race Two',
        link: '0-1',
        sub: null
      }]
    }, {
      name: 'Aintree',
      link: '2',
      sub: [{
        name: 'Event',
        link: '2-0',
        sub: null
      }, {
        name: 'Event',
        link: '2-1',
        sub: null
      }]
    }]
  };
  var getMenuItem = function(itemData) {
    var item = $("<li role='presentation'>")
      .append(
        $("<a>", {
          href: '#' + itemData.link,
          html: itemData.name,
          role: 'menuitem'
        }));
    if (itemData.sub) {
      var subList = $("<ul>");
      $.each(itemData.sub, function() {
        subList.append(getMenuItem(this));
      });
      item.append(subList);
    }
    return item;
  };

  var $menu = $(".dropdown-menu");
  $.each(data.menu, function() {
    $menu.append(
      getMenuItem(this)
    );
  });
  $menu.menu();
});