How to populate a dropdown list with json data dynamically (section wise into three different dropdowns) and have an action encountered on click

Question

I am new to json and do not know a single thing about it, but seeing the power it gives, I am planning to switch over to it for a better performance. In my web application I have three different dropdown lists: say sedans, hatch and SUV.
I want, whenever a user clicks on either of them, say hatch, the "name" of all the hatches in the json file gets loaded into the dropdown list. When the user clicks on any name of the hatch, corresponding price and carmaker company gets shown into the content of id="show" of the html page.
What should be the jquery snippet that I need to call to get this done/how shall I be proceeding. I'm a newbie to jquery, and know nothing about json, so a little help/guidance will be appreciated

Thanks in advance, please find the content of the files for more better idea.

Contents of my html file (I'm using twitter bootstrap)

<div id="abc">

 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Hatch</button><ul class="dropdown-menu">
                  <li><a href="#">Hatch names here one below the other</a></li>
                  <li><a href="#">Next Hatch name here</a></li>
                  <li><a href="#">Next Hatch name here</a></li>
                  </ul>
              </div><!-- /btn-group -->


 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sedan</button><ul class="dropdown-menu">
                  <li><a href="#">Sedan names here one below the other</a></li>
                  <li><a href="#">Next Sedan name here</a></li>
                  <li><a href="#">Next Sedan name here</a></li>
                  </ul>
              </div><!-- /btn-group -->

 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">SUV</button><ul class="dropdown-menu">
                  <li><a href="#">SUV names here one below the other</a></li>
                  <li><a href="#">Next SUV name here</a></li>
                  <li><a href="#">Next SUV name here</a></li>
                  </ul>
              </div><!-- /btn-group -->


</div>


<div id="show"><!-- Show the content related to the item clicked in either of the lists here --></div>

Contents of my json file (intended to store locally in the website's root folder)

{
    "Hatch": [
        {
            "name": "Fiesta",
            "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"
        }
    ]
}

Answer 1

It's to learn so look well, it's my day of kindness ^^^:

Bootply : http://bootply.com/113296

JS :

    $(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')   );
  });
});

Answer 2

This should get you on the right path.

$.getJSON('pathToFile',function(json){ //get data from file
  $('#abc').on('click','button',function(){ //bind the button tag click event
    var buttonVal = $(this).html();
    var ul = $(this).siblings();
    $(ul).empty();
    $.each(json[buttonVal],function(i,v){ //iterate over each value in the data 
        $(ul).append('<li><a href="#" >'+v.name+'</a></li>'); //add data object to the li tag.
    var li = $(ul).children()[i];
    $(li).data(v);
    });   
  });
  $('#abc').on('click','a',function(){ //bind a tag click event to list item
    $('#show').empty(); 
    var car = $(this).parent();
    var cardata = $(car).data();
    $('#show').html(cardata.name+' : '+cardata.price+' : '+cardata.maker); //use the data from the li tag. 
  });
});

See it working: jsfiddle the json data is an object called json