сортировка стран по названию в javascript/vue

avatar
tomatito
8 апреля 2018 в 09:47
537
2
2

я использую библиотеку country-data:

loadCountries() {
  return require("country-data")
  .countries.all.filter(country => country.name)
  .map(country => ({
    label: country.name,
    value: country.alpha3
  }));
},

я не могу сортировать страны по имени в выбранном компоненте

спасибо!

Источник

Ответы (2)

avatar
gyc
8 апреля 2018 в 10:00
3

Из документов

Я думаю, вы хотите использовать сортировку вместо фильтра.

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 }
];
items.sort(function (a, b) {
  return a.value - b.value;
});

В вашем случае это может сработать:

loadCountries() {
  return require("country-data")
  .countries.all.sort((a, b) => a.name - b.name)
  .map(country => ({
    label: country.name,
    value: country.alpha3
  }));
}

Вы также можете использовать localeCompare

loadCountries() {
  return require("country-data")
  .countries.all.sort((a, b) => a.name.localeCompare(b.name))
  .map(country => ({
    label: country.name,
    value: country.alpha3
  }));
}
Yuci
8 апреля 2018 в 10:30
0

Для справки, (a, b) => a.name - b.name не будет работать как функция сравнения для sort().

avatar
Yuci
8 апреля 2018 в 10:15
1

Вы можете попробовать использовать метод Array.prototype.sort() вместо фильтра:

<template>
    <div></div>
</template>

<script>
let countries = require("country-data").countries;

export default {
mounted() {
    let sortedCountries = countries.all
    .sort((c1, c2) => {
        if (c1.name < c2.name) return -1;
        if (c1.name > c2.name) return 1;
        return 0;
    })
    .map(country => {
        return {
            name: country.name,
            alpha3: country.alpha3
        };
    });

    console.log("sortedCountries: ", sortedCountries);
  }
};
</script>

<style scoped>
</style>

И вы увидите вывод, отсортированный по названиям стран в алфавитном порядке, как показано ниже:

enter image description here

Обновлено:

Возможно, лучше использовать String.prototype.localeCompare(compareString[, locales[, options]]), а аргументы locales и options позволяют приложениям указывать язык, порядок сортировки которого следует использовать, и настраивать поведение функции.

<script>
let countries = require("country-data").countries;

export default {
mounted() {
    let sortedCountries = countries.all
    .sort((c1, c2) => c1.name.localeCompare(c2.name))
    .map(country => {
        return {
            name: country.name,
            alpha3: country.alpha3
        };
    });

    console.log("sortedCountries: ", sortedCountries);
  }
};
</script>

И вы получите немного другой список:

enter image description here

Yuci
8 апреля 2018 в 10:29
0

@tomatito для справки, (a, b) => a.name - b.name не будет работать как функция сравнения для sort(), как в другом ответе.