javascript - 如何使用 API 和选定值检索 json 数据

Question

我不擅长 JavaScript，在使用 json 提供的 API 从 dataweave.in 访问数据时遇到问题。仅使用 API 检索“make”div(用于汽车制造)的数据时没有问题。 现在，根据“make”下拉列表中显示的选定项目，我想检索“model”div 中的汽车模型等。但我不能。请帮忙，不要消极，因为我是新来的。这是我的代码:

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

js代码:

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

           });

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

});


     $.getJSON( 'http://api.dataweave.in/v1/car_prices/listUniqMakes?api_key=527686f75e0e2b48e757b2b386d61fdb0667bc7f&make=#brand', function( data ) {
                  var items_model = [];
                  $.each( data["data"], function( key, val ) {
                    items_model.push( "<option id='" + val["model"] + "'>" + val["model"] + "</option>" );
                  });

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

请引用此链接: JsFidle

Answer 1

有几个错误。 1.需要使用正确的api获取数据 2. 您没有在第二次ajax调用中指定正确的数据 3.您甚至需要将更改绑定(bind)到 make 选择框，然后通过第二个 ajax 调用获取模式

$.getJSON( "http://api.dataweave.in/v1/car_prices/listUniqMakes?api_key=596fd23588a0957f6ca0c190cff9b399630b0ec1", function( data ) {
                      var items = [];
                      $.each( data["data"], function( key, val ) {
                          console.log(val['brand']);
                        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=b20a79e582ee4953ceccf41ac28aa08d&make='+make+'&city=Bangalore&page=1&per_page=10', function( data ) {
                  var items_model = [];
                  $.each( data["data"], function( key, val ) {
                      console.log(val['model']);
                    items_model.push( "<option id='" + val["model"] + "'>" + val["model"] + "</option>" );
                  });

                  $( "<select/>", {
                    "class": "my-new-list-1",
                    "id" : "select2",
                    html: items_model.join( "" )
                  }).appendTo( ".model" );
});


    });
});

JSFIddle

OP 请求另一个问题后

您也可以获得变体，例如 fiddle 。 您需要将城市作为第一个选择框。现在我已经将 banglore 指定为静态