JavaScript 在填充 "select" 之前按字母顺序获取和排序（带有巴西葡萄牙语重音的单词）

Question

我的问题是关于在我的应用程序中填充“select”字段之前获取和排序数据（其中包括重音词）。

这是我用于获取和填充状态列表的代码（按其 ID 而不是按名称排序）：

function populateUFs() {
  const ufSelect = document.querySelector("select[name=uf]")

  fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados")
    // .then( (res) => { return res.json() })
    .then(res => res.json())
    .then(states => {
      for (const state of states) {
        ufSelect.innerHTML += `<option value="${state.id}">${state.nome}</option>`
      }
    })
}

populateUFs()

<select name="uf">

</select>

我怎样才能按字母顺序、考虑重音词？

即：

圣保罗
圣卡塔琳娜
托坎廷斯

而不是：

圣保罗
阿马帕
亚马逊

谢谢。

Answer 1

你应该使用Array.sort

 states.sort((a, b) => (a.nome > b.nome) ? 1 : (b.nome > a.nome) ? -1 : 0)

并将比较函数传递给它

比较函数的目的是定义替代排序顺序。比较函数应该 return 负值、零值或正值

如果结果为负，则 a 排在 b 之前。

如果结果为正，则 b 排在 a 之前。

如果结果为 0，则不对两个值的排序顺序进行任何更改

const ufSelect = document.querySelector("#ufSelect")
fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados")
  // .then( (res) => { return res.json() })
  .then(res => res.json())
  .then(states => {
    states.sort((a, b) => (a.nome > b.nome) ? 1 : (b.nome > a.nome) ? -1 : 0)
    for (const state of states) {
      ufSelect.innerHTML += `<option value="${state.id}">${state.nome}</option>`
    }
  })

<select id="ufSelect"></select>

Answer 2

使用Array.sort()方法。

states.sort((a, b) => a.nome < b.nome ? -1 : a.nome === b.nome ? 0 : 1)

function populateUFs() {
  const ufSelect = document.querySelector("select[name=uf]")

  fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados")
    // .then( (res) => { return res.json() })
    .then(res => res.json())
    .then(states => {
      states.sort((a, b) => a.nome < b.nome ? -1 : a.nome === b.nome ? 0 : 1)
      for (const state of states) {
        ufSelect.innerHTML += `<option value="${state.id}">${state.nome}</option>`
      }
    })
}

populateUFs()

<select name="uf">

</select>

Array.sort() 接受一个排序函数，该函数接受数组的两个元素和 returns 一个指定它们应该处于哪个顺序的数字。

如果数字是正数，则将第一个元素排在第二个元素之后
如果数字为负数，则将第一个元素排在第二个元素之前
如果数字为零则不改变顺序

（有关详细信息，请参阅此 link）。

如果您需要排序以使用重音字符，请使用：

a.nome.localeCompare(b.nome) 而不是 a.nome < b.nome ? ...

Documentation for localeCompare()

JavaScript 在填充 "select" 之前按字母顺序获取和排序（带有巴西葡萄牙语重音的单词）

JavaScript Fetch and Sort in Alphabetic order (with Brazilian portuguese accented words) before populating a "select"

javascript

sorting

fetch

populate