Sorting select list of options alphabetically in Javascript

Question

please can you help me to populate my select list alphabetically.

Here is the code I have so far:-

$.getJSON("php/countryBorders.geo.json", (data) => {
  $select.html("");
  

  for (let i = 0; i < data["features"].length; i++) {
    
    $select.append(
      '<option value="' +
        data["features"][i]['properties']["iso_a2"] +
        '">' +
        data["features"][i]["properties"]["name"]
       
    );  
   
  }
});

I would like to sort the list aphabetically by name, but am unsure how. — Mark Nicholls, Oct 19 '20 at 13:08
Does this answer your question? [How may I sort a list alphabetically using jQuery?](https://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery) — Lapskaus, Oct 19 '20 at 13:13

score 0 · Answer 1 · answered Oct 19 '20 at 13:07

Firstly Extract the text and value of each option tag into an array of objects. ANd sort the array. Then update the option elements with the array contents in order

var opts = $('select');
var arr = opts.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
opts.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

score 0 · Answer 2 · answered Oct 19 '20 at 13:13

you can use below logic for sorting, you just need to use name value instead of a and b while comparing (from the the array which you want to sort).

var data  = ["ball","cat","elephant","dog","apple"];
console.log(data);
data.sort(function(a, b) {
    a = a.toLowerCase();
    b = b.toLowerCase();
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
});
console.log(data);

score 0 · Accepted Answer · answered Oct 19 '20 at 13:15

$.getJSON("php/countryBorders.geo.json", (data) => {
  $select.html("");
  
  const features = data["features"].sort((a,b) => {
    return (
      (a.properties.name < b.properties.name && -1) ||
      (a.properties.name > b.properties.name && 1) ||
      0
    ); 
  });
  
  features.forEach(feature => {
    $select.append(`<option value="${feature.properties.iso_a2}">${feature.properties.name}</option>`);
  });
});

Sorting select list of options alphabetically in Javascript

3 Answers3