0

The server returns the following response from a query:

       { ROM: "Romania", 
         YUG: "Yugoslavia",
         PRT: "Portugal", 
         MKD: "Macedonia", 
         GRC: "Greece",
         FRA: "France", 
         ISL: "Iceland", 
         LUX: "Luxembourg", 
         HUN: "Hungary", 
         GBR: "United Kingdom", 36 more… }

I need to put these into an already existing select like so:

 $.each(result, function(key, value) { 

        $('#country')
        .append($("<option></option>")
        .attr("value",key)
        .text(value)); 

        });

Can someone tell me how to sort the countries alphabetically by value before inserting them into the html element?

Arthur Nobrega
  • 25
  • 1
  • 7
  • You can do a sort on result. – Xiaosu Apr 28 '15 at 01:33
  • 1
    First push your key-value pairs into an array, define a sort function, then run `array.sort(sortFunc)`. see: http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript. – Jasen Apr 28 '15 at 01:34
  • This answer got me in the right track. I am able to sort the values and add them to the option element. Ultimately, I want to end up with the country code as the value attribute. Like so: . WIll play with it some more. Thanks – Arthur Nobrega Apr 28 '15 at 02:23

4 Answers4

2

You can't sort objects but you can sort arrays, so you can create an array of HTMLOptionElementobjects and sort it and then append it to the select element.

$('#country').append(function() {
    return $.map(result, function (key, value) {
        return new Option(key, value);
    }).sort(function (a, b) {
        return a.text.localeCompare(b.text);
    });
});

Here is a demo.

Ram
  • 143,282
  • 16
  • 168
  • 197
1

You can sort the returned JSON, I'm assuming result is your returned JSON. Kind of

Object.keys(result).sort().reduce(function (a, b) { a[b] = result[b]; return a; }, {});

Fiddle

That will sort the object. To sort the input:

$("#country").html(function () {  return $(this).find('option').sort(function(a,b){  return a.value-b.value  });  });

Replace $("#country") with the name of your select.

Quick Plugin

This will add a sortArray function

$.fn.sortSelect=function(){this.html(function(){  return $(this).find('option').sort(function(a,b){return a.value-b.value});});}

Then you can do

$('#country').sortSelect()
Downgoat
  • 13,771
  • 5
  • 46
  • 69
  • In your first fragment, what is `key`? I guess it should be `b`. Anyway, this fragment is essentially making a copy of `result`. In real life it probably will work, but it depends on undocumented browser internals for handling the internals of key ordering. The engine is not obligated to deliver up the keys in the order in which they were added. –  Apr 28 '15 at 02:10
1
function OrderListBy(prop) {
    return function (a, b) {
        if (a[prop] > b[prop]) {
            return 1;
        }
        else if (a[prop] < b[prop]) {
            return -1;
        }
        return 0;
    }
}

Call this function: Sort by name -

YourArray.sort( OrderListBy("name") );
Sanjeev Singh
  • 3,976
  • 3
  • 33
  • 38
0
var array = [item1, item2];
array.sort();
Xiaosu
  • 605
  • 1
  • 9
  • 21