title: How to retrieve data contained in json format using API
body: <p>please no negative points as I am so new. Plz check the <a href="http://jsfiddle.net/L4v7d8kn/12/" rel="nofollow noreferrer">jsFidle</a> link and then read the following. Actually i am going to retrieve data using json, API and in the first dropdown list CAR MAKE have to be displayed. Then based on the selected CAR MAKE, CAR MODEL should be retrieved. After that i have to make a call by selecting CAR MODEL to retrieve VARIENT. Finally You have to retrieve cities in four dropdown lists. Now based on CAR MAKE, CAR MODEL, CAR VARIENT and four different cities the car price should be displayed on google map for the cities clearly identifying those.</p>
  
  <p>For documentation: <a href="http://dataweave.in/apis/usage/15/Car-Prices-India" rel="nofollow noreferrer">API Docs.</a></p>
  
  <p>What I exactly want: <img src="https://i.stack.imgur.com/eOaVQ.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="wrapper"&gt;
      &lt;div class="make"&gt;
          &lt;b&gt;Make&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="model"&gt;
          &lt;b&gt;Model&lt;/b&gt;&lt;span id="mod"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="varient"&gt;
          &lt;b&gt;Varient&lt;/b&gt;&lt;span id="var"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="cities"&gt;
          &lt;b&gt;Cities&lt;/b&gt;
              &lt;div class="c1"&gt;&lt;/div&gt;
              &lt;div class="c2"&gt;&lt;/div&gt;
              &lt;div class="c3"&gt;&lt;/div&gt;
              &lt;div class="c4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>   $.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( "&lt;option id='" + val["brand"] + "'&gt;" + val["brand"] + "&lt;/option&gt;" );
                    });
  
                    $( "&lt;select/&gt;", {
                      "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&amp;make='+make+'&amp;city=Bangalore&amp;page=1&amp;per_page=10', function( data ) {
                var items_model = [];
          var items_varient = [];
                $.each( data["data"], function( key, val ) {
                    console.log(val['variant']);
                  items_model.push( "&lt;option id='" + val["model"] + "'&gt;" + val["model"] + "&lt;/option&gt;" );
                                        items_varient.push( "&lt;option id='" + val["variant"] + "'&gt;" + val["variant"] + "&lt;/option&gt;" );
                });
  
                var sel = $( "&lt;select/&gt;", {
                  "class": "my-new-list-1",
                  "id" : "select2",
                  html: items_model.join( "" )
                });
           var sel_var = $( "&lt;select/&gt;", {
                  "class": "my-new-list-2",
                  "id" : "select3",
                  html: items_varient.join( "" )
                });
          $('#mod').html(sel);
          $('#var').html(sel_var);
   });
  
  
    });
  });
  </code></pre>