JSFiddle - React, Tailwind, and code Playground

by Lucaskazama

HTML

<form>
  <select class="fp-select-country" data-country="BR">
    <option class="fp-select-load" disabled>País</option>
  </select>
</form>

<div id="result">

</div>

JavaScript

$.ajax({
  url: "https://restcountries.com/v3.1/all",
  beforeSend: function( xhr ) {
    $(".fp-select-load").text('...');
  }
})
  .done(function( data ) {
  //idd->root and if have join with idd->suffixes, name->common and, cca2  
  let countries = [];
  Object.entries(data).forEach(([key, value]) => {      
  	if(value.cca2){
    	countries.push({name: `${value.name.common}`, slug: `${value.cca2}`, flag: `${value.flag}`, code: `${value.idd.root}`, prefix: `${value.idd.suffixes}`});
		}      
  });
  
  buildOptions(countries);
  
});

function buildOptions(countriesArr){
  countriesArr.sort(function(a, b) {
    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }

    // names must be equal
    return 0;
	});
	$('.fp-select-load').remove();
  for (var i = 0; i < countriesArr.length; i++) {
    $("form").find('.fp-select-country').each(function(){
    	$(this).append("<option>"+ countriesArr[i].flag +" "+ countriesArr[i].code + " - " + countriesArr[i].name + "</option>");
    })
  }
}