Async Menu Loading

by xxxwww

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="dropdown" id="someMenu">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item</a></li>
  </ul>
</div>

JavaScript

let drawMenu = (menuList, items)=> {
    let menuListItems = items.list;
    
    for (let i in menuListItems) {
    	let item = menuListItems[i];
    	menuList
      	.append('<li><a href="#">Load menu item "'+
        	item.name+'" with id #'+item.id+'</a></li>');
    }
};

let $menu = $('#someMenu');
$menu.on('show.bs.dropdown', ()=> {
  $.post({
      url: '/echo/json/',
      data: {
          json: JSON.stringify({
              list: [{id: 1, name: 'loh'}, {id: 2, name: 'sraka'}]
          }),
          delay: 1
      },
      success: (response)=> {
          drawMenu($menu.find('ul'), response);
      }
  });
})