API - 对外部对象进行排序答案

【问题标题】：API - sort an external objectAPI - 对外部对象进行排序
【发布时间】：2022-01-26 03:07:33
【问题描述】：

我想使用这个 API https://restcountries.com/#api-endpoints-v3-all

在这个对象中，国家不是按字母顺序排列的。如何在函数内完成？

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

代码属于 Laurence Svekis，我正在学习他的课程，但在他的版本中，它已经按 API 侧排序。

谢谢！

【问题讨论】：

标签： javascript api

【解决方案1】：

如果代码的其余部分有效，那么唯一的修改是在创建选项的迭代之前进行排序...

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) {
    // ...

【讨论】：

【解决方案2】：

您可以在buildSelect 函数中调用.forEach 之前对数据进行排序。我建议使用localeCompare 进行排序，因为来自https://restcountries.com/v3.1/all 的数据中的一些常用名称包括非非ASCII 字符。

快速示例

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

【讨论】：