Me gustaría usar esta API https://restcountries.com/#api-endpoints-v3-all
Este es el enlace https://restcountries.com/v3.1/all
En este objeto, los países no están ordenados alfabéticamente. ¿Cómo puedo hacerlo dentro de la función?
const btn = document.querySelector("button"); const output = document.querySelector("#output"); const intake = document.querySelector("input"); const url = "https://restcountries.com/v3.1/all"; let myData = {}; fetch(url).then(function (res) { return res.json() }).then(function (data) { myData = data; buildSelect(data); }) function buildSelect(d) { let select = document.createElement('select'); d.forEach(function (item, index) { let option = document.createElement('option'); console.log(item,index); option.value = index; option.textContent = item.name.common; select.appendChild(option); }) document.querySelector('body').appendChild(select); }El código pertenece a Laurence Svekis, estoy haciendo su curso, pero en su versión ya está ordenado por API.
¡Gracias!
Si el resto del código funciona, entonces la única modificación es una ordenación antes de la iteración que crea las opciones...
function buildSelect(data) { sortedData = data.sort((a,b) => { const aName = a.name.common; const bName = b.name.common; return (aName < bName) ? -1 : (aName > bName) ? 1 : 0; }); let select = document.createElement('select'); sortedData.forEach(function (item, index) { // ...Puede ordenar los datos antes de llamar a .forEach dentro de la función buildSelect . Recomendaría ordenar usando localeCompare ya que algunos de los nombres comunes en los datos de https://restcountries.com/v3.1/all incluyen caracteres que no son ASCII.
Ejemplo rápido
d .sort((a, b) => ('' + a.name.common).localeCompare(b.name.common)) .forEach(function (item, index) { let option = document.createElement('option'); console.log(item,index); option.value = index; option.textContent = item.name.common; select.appendChild(option); }) // If you must support IE you could replace the sort with... // .sort(function(a, b) { return ('' + a.name.common).localeCompare(b.name.common) })); const btn = document.querySelector("button"); const output = document.querySelector("#output"); const intake = document.querySelector("input"); const url = "https://restcountries.com/v3.1/all"; let myData = {}; fetch(url).then(function (res) { return res.json() }).then(function (data) { myData = data; buildSelect(data); }); function buildSelect(d) { let select = document.createElement('select'); d .sort((a, b) => ('' + a.name.common).localeCompare(b.name.common)) //.sort(function(a, b) { return ('' + a.name.common).localeCompare(b.name.common) }) .forEach(function (item, index) { let option = document.createElement('option'); //console.log(item,index); option.value = index; option.textContent = item.name.common; select.appendChild(option); }) document.querySelector('body').appendChild(select); }