CODEWITHSUNDEEP
javascriptjqueryajax
Abel
Abel

Reputation: 13

how to get api data in select box with query

I made a table with select boxes using an api. my goal is to display the borders data in the div when it's selected but I can figure out how here's what I have so far:

$.getJSON(" https://restcountries.eu/rest/v2/all", function(countries) {
  let ul = $("<ul>");
  let sel;

  $.each(countries, function(index, oCountry) {
    sel = $("<select>");

    $.each(oCountry.borders, function(index2, border) {
      sel.append($("<option>").html(border));
    });

    ul.append($("<li>").html(oCountry.name + " ").append(sel));
  });

  $("#div1").empty();
  $("#div1").append(ul);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="borderDiv">display borders</div>
<div id="div1">countries</div>

Upvotes: 1

Views: 203

Answers (2)

Rohit Mittal
Rohit Mittal

Reputation: 2104

You can create a change event on dropdown value changes. Firstly you need to add a class in dropdown and then you can call jQuery code to get selected values and then can place it in any div as below:

$.getJSON(" https://restcountries.eu/rest/v2/all", function(countries) {
  let ul = $("<ul>");
  let sel;

  $.each(countries, function(index, oCountry) {
    sel = $("<select class='borderDd'>");

    $.each(oCountry.borders, function(index2, border) {
      sel.append($("<option>").html(border));
    });

    ul.append($("<li>").html(oCountry.name + " ").append(sel));
  });

  $("#div1").empty();
  $("#div1").append(ul);
});

$(document).on('change', '.borderDd', function() {
  $("#selectedBorder").text($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="borderDiv">display borders</div>
<div id="div1">countries</div>
<div id="selectedBorder"></div>

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

  • Change sel = $("<select>"); to sel = $("<select class='border' data-country='"+oCountry.name+"'>");

  • Also use sel.append($("<option>").val(border).html(border)); instead of sel.append($("<option>").html(border));

Now the <select> has class border and has data-country attribute which holds country name .. And the <option> has a value of the border

  • Then add <select> change event $(document).on('change' , 'select.border' , (e) => {

$.getJSON(" https://restcountries.eu/rest/v2/all", function( countries) {
    let ul = $("<ul>");
    let sel;    
    $.each(countries, function(index, oCountry){
        sel = $("<select class='border' data-country='"+oCountry.name+"'>"); //<<< Here
            $.each(oCountry.borders , function(index2, border){
                sel.append($("<option>").val(border).html(border)); //<<<< Here
            });
            ul.append($("<li>").html(oCountry.name + " ")
              .append( sel ));
    });
    $("#div1").empty();
    $("#div1").append(ul);
});

$(document).on('change' , 'select.border' , (e) => {
  console.log('country: '+$(e.target).attr('data-country')+' -Border: '+$(e.target).val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="borderDiv">display borders</div>
<div id="div1">countries</div>

Upvotes: 1

Related Questions