Say I have an object that looks like this:

countrylist:{
        regions:[
            {
                region: "Europe",
                countries: [
                    {
                        "country":"Albania",
                        "href":"eu",
                        "locale":"en_al"
                    },
                    {
                        "country":"France",
                        "href":"eu",
                        "locale":"en_fr"
                    },
                    {
                        "country":"Ireland",
                        "href":"eu",
                        "locale":"en_ie"
                    }]      
                },
                    region: "Asia",
                    countries: [
                        {
                            "country":"China",
                            "href":"as",
                            "locale":"ch"
                        },
                        {
                            "country":"Japan",
                            "href":"as",
                            "locale":"jp"
                        },
                        {
                            "country":"Thailand",
                            "href":"as",
                            "locale":"th"
                        }]      
                    }
                 ]}

If you could see the whole object, you would see that it's grouped by region, and the countries within each region are sorted alphabetically. However, I need to populate a dropdown menu of all the countries, alphabetized, but not by region. What's the cleanest method to go about sorting these items?

I originally pushed the country field to an empty array and sorted that. However, I need to preserve the relationship between the country field and its corresponding href and locale fields.

Say I have an object that looks like this:

countrylist:{
        regions:[
            {
                region: "Europe",
                countries: [
                    {
                        "country":"Albania",
                        "href":"eu",
                        "locale":"en_al"
                    },
                    {
                        "country":"France",
                        "href":"eu",
                        "locale":"en_fr"
                    },
                    {
                        "country":"Ireland",
                        "href":"eu",
                        "locale":"en_ie"
                    }]      
                },
                    region: "Asia",
                    countries: [
                        {
                            "country":"China",
                            "href":"as",
                            "locale":"ch"
                        },
                        {
                            "country":"Japan",
                            "href":"as",
                            "locale":"jp"
                        },
                        {
                            "country":"Thailand",
                            "href":"as",
                            "locale":"th"
                        }]      
                    }
                 ]}

If you could see the whole object, you would see that it's grouped by region, and the countries within each region are sorted alphabetically. However, I need to populate a dropdown menu of all the countries, alphabetized, but not by region. What's the cleanest method to go about sorting these items?

I originally pushed the country field to an empty array and sorted that. However, I need to preserve the relationship between the country field and its corresponding href and locale fields.

• javascript
• sorting
• object

• I might be wrong but did you miss the opening brace of the second region? – pimvdb Commented Oct 26, 2011 at 20:38
• I may have missed something while mocking up this dummy object. – Paul Erdos Commented Oct 26, 2011 at 20:46

2 Answers 2

Initialize an empty array, then go through the regions and append all the countries to that array. When you're done, sort the array.

var countries = [];
for(var i = 0; i < countrylist.regions.length; i++)
    Array.prototype.push.apply(countries, countrylist.regions[i].countries);

countries.sort(function(a, b) {
    return a.country > b.country;
});

console.log(countries);

http://jsfiddle/Jehsb/

You need to walk your structure and create an array of country names. You can then sort the array, and you're done.

var arr = [];
for(var i = 0; i < countryList.regions.length; i++){
    var countries = countryList.regions[i].countries;
    for(var j = 0; j < countries.length; j++){
        arr.push(countries[j].country);
    }
}

arr.sort();

If you need the other information as well, what you'd need is a flat array of all country objects, and then apply a custom sort function:

var arr = [];
for(var i = 0; i < countryList.regions.length; i++){
    var countries = countryList.regions[i].countries;
    for(var j = 0; j < countries.length; j++){
        arr.push(countries[j]);
    }
}

arr.sort(function(xx,yy){ 
    return xx.country < yy.country ? -1 : 1;
});