如何使用API​​检索json格式中包含的数据

Question

因为我是如此新颖，所以请不要有任何负面影响。 Plz检查jsFidle链接，然后阅读以下内容。实际上我将使用json，API检索数据，并且必须在第一个下拉列表中显示CAR MAKE。然后根据选定的CAR MAKE，应检索CAR MODEL。之后我必须通过选择CAR MODEL来检索VARIENT来打电话。最后，您必须在四个下拉列表中检索城市。现在基于CAR MAKE，CAR MODEL，CAR VARIENT和四个不同的城市，汽车价格应该显示在谷歌地图上，以便明确识别这些城市。

文档：API Docs.

我真正想要的是：

HTML：

 <div class="wrapper">
    <div class="make">
        <b>Make</b>
    </div>
    <div class="model">
        <b>Model</b><span id="mod"></span>
    </div>
    <div class="varient">
        <b>Varient</b><span id="var"></span>
    </div>
    <div class="cities">
        <b>Cities</b>
            <div class="c1"></div>
            <div class="c2"></div>
            <div class="c3"></div>
            <div class="c4"></div>
    </div>


</div>

JS：

   $.getJSON( "http://api.dataweave.in/v1/car_prices/listUniqMakes?api_key=f63d3f0d8138ad1ea25bfb0f3068ec39efec318c", function( data ) {
                  var items = [];
                  $.each( data["data"], function( key, val ) {
                      console.log(val);
                    items.push( "<option id='" + val["brand"] + "'>" + val["brand"] + "</option>" );
                  });

                  $( "<select/>", {
                    "class": "my-new-list",
                    "id" : "select1",
                    html: items.join( "" )
                  }).appendTo( ".make" );

}).done(function(){
$('#select1').change(function(){
    console.log($(this).val());
    var make = $(this).val();
    $.getJSON( 'http://api.dataweave.in/v1/carPricesIndia/findByMake/?api_key=f63d3f0d8138ad1ea25bfb0f3068ec39efec318c&make='+make+'&city=Bangalore&page=1&per_page=10', function( data ) {
              var items_model = [];
        var items_varient = [];
              $.each( data["data"], function( key, val ) {
                  console.log(val['variant']);
                items_model.push( "<option id='" + val["model"] + "'>" + val["model"] + "</option>" );
                                      items_varient.push( "<option id='" + val["variant"] + "'>" + val["variant"] + "</option>" );
              });

              var sel = $( "<select/>", {
                "class": "my-new-list-1",
                "id" : "select2",
                html: items_model.join( "" )
              });
         var sel_var = $( "<select/>", {
                "class": "my-new-list-2",
                "id" : "select3",
                html: items_varient.join( "" )
              });
        $('#mod').html(sel);
        $('#var').html(sel_var);
 });


  });
});