Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

145
Views
API - sort an external object

I would like to use this API https://restcountries.com/#api-endpoints-v3-all

This is the link https://restcountries.com/v3.1/all

In this object, countries are not alphabetically sorted. How can I do it within the function?

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);
    }

The code belongs to Laurence Svekis, I'm doing his course, but in his version it's sorted by API side already.

Thank you!

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

If the rest of the code works, then the only modification is a sort before the iteration that creates the options...

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) {
    // ... 
about 4 years ago · Santiago Trujillo Report

0

You can sort the data before calling .forEach within the buildSelect function. I'd recommend sorting using localeCompare as some of the common names in the data from https://restcountries.com/v3.1/all include non non-ASCII characters.

Quick example

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);
}

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!