如何使用 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.您需要将更改绑定到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 设为静态

Answer 2

不完全确定 api 调用，但您正在寻找的是：

$.getJSON( "http://api.dataweave.in/v1/car_prices/listUniqMakes?api_key=596fd23588a0957f6ca0c190cff9b399630b0ec1", 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" ); 
}).done(function() {
$('#select1').change(function(){
    $.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_model.join( "" )
              }).appendTo( ".model" );
});
});
});

.done(function() { $('#select1').change(function(){ YOUR API CALL HERE}); });

将告诉$.getJSON()，在获取内容后绑定一个更改事件，该事件将从 api 调用中获取数据。

见： JSFiddle