JSON DDL Bootstrap

JSON DDL Bootstrap

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
      
      <ul class="nav nav-pills" id="abc">
<button type="button" class="btn btn-default">Home</button>
 <!-- btn-group --> 
  				<div id="hatch" class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Overview <span class="caret"></span></button>
                   <ul class="dropdown-menu">
                  </ul>
              </div><!-- /btn-group -->


 <!-- btn-group --> <div id="sedan" class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sedan</button>
  				<ul class="dropdown-menu">

                  </ul>
              </div><!-- /btn-group -->

 <!-- btn-group --> <div id="suv" class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">SUV</button><ul class="dropdown-menu">

                  </ul>
              </div><!-- /btn-group -->


</div>
      
      </div>
</nav>

<div id="show" class="well well-sm"></div>

JavaScript

var json = {
    "Hatch": [
        {
            "name": "Overview",
            "price": "1223",
            "maker": "Ford"
        },
        {
            "name": "Polo",
            "price": "3453",
            "maker": "VW"
        }
    ],
    "Sedan": [
        {
            "name": "Mustang",
            "price": "1223",
            "maker": "Ford"
        },
        {
            "name": "Jetta",
            "price": "3453",
            "maker": "VW"
        }
    ],
    "SUV": [
        {
            "name": "Santa Fe",
            "price": "1223",
            "maker": "Hyundai"
        },
        {
            "name": "Evoque",
            "price": "3453",
            "maker": "Land Rover"
        }
    ]
}

$(document).ready(function(){
	for( index in json.Hatch )
    {
      $('#hatch ul').append('<li><a href="#" data-maker="'+json.Hatch[index].maker+'" data-price="'+json.Hatch[index].price+'">'+json.Hatch[index].name+'</a></li>');
   
    }
	for( index in json.Sedan )
    {
      $('#sedan ul').append('<li><a href="#" data-maker="'+json.Sedan[index].maker+'" data-price="'+json.Sedan[index].price+'">'+json.Sedan[index].name+'</a></li>');

    }
	for( index in json.SUV )
    {
      $('#suv ul').append('<li><a href="#" data-maker="'+json.SUV[index].maker+'" data-price="'+json.SUV[index].price+'">'+json.SUV[index].name+'</a></li>');

    }
  
  $('a').on('click', function(){
    $('#show').html(   'Price : ' + $(this).attr('data-price') + '| Maker : ' +  $(this).attr('data-maker')   );
  });
});