VueJS - Make the drop-down list display alphabetically

Question

I am trying to sort a list alphabetically and am not having any success.

I have a computed property that pulls in the data using Axios. It removes any duplicates and splits the array of objects at each comma. This works well.

I have tried various ways to try and display the list AZ inc. the example below.

Would someone please be kind enough to help?

The data looks like this:

"C": "UK, EU, EEA, UK and Islands, England Wales & Northern Ireland, International, UK, EU, EEA, UK and Islands,England Wales & Northern Ireland",

And my computed property like this:

computed: {
    nationalities() {
      return this.results.filter((result) => result.metaData.C);
    },

    uniquenationalities() {
      // All unique nationalities in metaC
      const metaGnationalities = this.results
        .filter((result) => result.metaData && result.metaData.C)
        .map((item) => item.metaData.C)
        .filter((nationality, i, arr) => arr.indexOf(nationality) === i);
      // Split multiple nationalities in strings and store in an array
      let nationalities = [];
      metaGnationalities.forEach((item) => {
        const splitArr = item.split(", ");
        nationalities = nationalities.concat(splitArr);
      });
       
       let nationalities2 = [];
      nationalities2.sort(function(a, b) {
        if (a.nationalities2 < b.nationalities2) {
           return -1;
         }
         if (a.nationalities2 > b.nationalities2) {
           return 1;
         }
         return 0;
       });

      // debugger;
      // Filter again for unique nationalities
      return nationalities2.filter(
        (nationality, i, arr) => arr.indexOf(nationality) === i
      );
    },
  },
};

Answer 1

You're currently sorting an empty array ( nationalities2 ). Instead, sort nationalities .

The sort() method sorts the elements of an array in place and returns the sorted array.

Here is a simplified example of how to fix the issue:

// Assuming there is a typo in the last comma (missing space after it)
const C = "UK, EU, EEA, UK and Islands, England Wales & Northern Ireland, International, UK, EU, EEA, UK and Islands, England Wales & Northern Ireland";

function uniquenationalities(inputString) {
  const nationalities = inputString.split(", ");

  // Instead of sorting 'nationalities2',
  // sort, filter, and return 'nationalities'
  return nationalities
    .sort()
    .filter(
      (nationality, i, arr) =>
        arr.indexOf(nationality) === i
    );
}

console.log(uniquenationalities(C))

Which logs:

[
  "EEA",
  "EU",
  "International",
  "UK",
  "UK and Islands",
]

The full revised code would be:

computed: {
  nationalities() {
    return this.results.filter((result) => result.metaData.C);
  },

  uniquenationalities() {
    // All unique nationalities in metaC
    const metaGnationalities = this.results
      .filter((result) => result.metaData && result.metaData.C)
      .map((item) => item.metaData.C)
      .filter((nationality, i, arr) => arr.indexOf(nationality) === i);

    // Split multiple nationalities in strings and store in an array
    let nationalities = [];
    metaGnationalities.forEach((item) => {
      const splitArr = item.split(", ");
      nationalities = nationalities.concat(splitArr);
    });

    return nationalities
      .sort()
      .filter((nationality, i, arr) => arr.indexOf(nationality) === i);
    },
},

Note, as @JamesWhiteley said in the comments, sort() without any parameters will sort strings alphabetically by default, and we don't need a custom sorting function.