How to populate a drop-down list with json data dynamically (wise section into three different drop-down lists) and have an action that occurs when you click

Question

I am new to json and know nothing about it, but, seeing the power it gives, I plan to switch to it for better performance. In my web application, I have three different drop-down lists: say, sedans, a sunroof and an SUV.
I want, whenever a user clicks on any of them, say, a stroke, the "name" of all strokes in the json file is loaded in the drop-down list. When the user clicks on any name of the hatch, the corresponding price and the car manufacturer are displayed in the id="show" content on the html page.
What should be the jquery fragment that I need to call to do this / how I will continue. I am new to jquery and don't know anything about json, so a little help / guide would be appreciated.

Thanks in advance, please find the contents of the files for a better idea.

Content of my html file (I use 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> 

The contents of my json file (intended for local storage in the website 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

This is to learn to look so good, this is 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 lead you to 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 how it works: jsfiddle json data is an object named json