Question

我在javascript方面不擅长，我在使用json提供的API从dataweave.in访问数据时遇到问题。检索＆＃34; make＆＃34;的数据时没有问题。 div（用于汽车制造）仅使用API。现在基于＆＃34; make＆＃34;中的下拉列表中显示的选定项目我想在＆＃34; model＆＃34;中找回汽车模型。 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 code：

$.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

不完全确定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

Answer 2

有几个错误。 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作为静态

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

2 个答案:

如何使用API​​和选定的值检索json数据

2 个答案:

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