How to make a select box in an api table with jquery?

  api, javascript, jquery

Recently I started learning JavaScript and now I’m making a table with the countries API. I’m trying to figure out how I can make a select box for each country in the table with the country borders as the option so that when I select a border, it will display in a div
here’s my attempt

<!DOCTYPE html>
    <html>
    <head>
      <title>API TEST</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
      <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <h2>Country Table</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-striped" id="country-table">
                    <thead>
                        <tr>
                        
                            <th>Country Name</th>
                            <th>Region</th>
                            <th>Borders</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $.get('//restcountries.eu/rest/v2/all', function(data) {
                $.each(data, function(index, val) {
                    var html = '<tr>';
                    html += '<td>'+ val.name+'</td>';
                    html += '<td>'+ val.region+'</td>';
                    html += '<td>'+ val.borders.length+'</td>';
                    html += '<td>'+ '<select>' + '<option>' + val.borders+ '</option>'+ '</select>' +'</td>';
                    
                
                    html += '</tr>';

                    $('#country-table tbody').append(html);
                });
            });
        });
    </script>
</body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT