Sort a Javascript options value alphabetically

Question

I have something similar to the following object below:

EUR: { name: 'Europe', countries: { FR: { name: 'France', cities: {} }, DE: { name: 'Germany', cities: {} }, ES: { name: 'Spain', cities: {} } } }

I am trying to figure out a way to sort countries in alphabetical order on countries then the name of each country e.g France, Spain, Germany. The approach I was going to take was splitting this out into an array First and rebuilding.

I was wondering if anybody has any different approaches that I am missing they could help me with?

you miss an (or more) array/s for sorting. objects have actually no order. — Nina Scholz, Feb 15 '17 at 14:37
If order really matters to you, use an array. Javascript objects properties don't really have order. — bobjoe, Feb 15 '17 at 14:39
Ans: http://stackoverflow.com/questions/17684921/sort-json-object-in-javascript — Michael Seltene, Feb 15 '17 at 14:39
When you split them out to arrays and sort, you'd need to keep the arrays, if for no other reason than to have a way to access the objects in order. You can keep the object structure too, but there will never be any reliable ordering. — , Feb 15 '17 at 14:41
Yes, `countries` should probably be defined as `countries: [ {FR: { name: 'France' ...` Then I would use [lodash](https://lodash.com/docs/4.17.4#sortBy) to do the sorting — Tian van Heerden, Feb 15 '17 at 14:43
Possible duplicate of [sort json object in javascript](http://stackoverflow.com/questions/17684921/sort-json-object-in-javascript) — Teemu, Feb 15 '17 at 14:48
As other had pointed out, The order of the elements cannot be guaranteed for object property. — GibboK, Feb 15 '17 at 15:14

score 0 · Answer 1 · answered Feb 15 '17 at 14:54

I've done something like this in the past to bring some order to an object:

EUR: {
    name: 'Europe',
    countries: {
       FR: {
          name: 'France',
          cities: {}
       },
       DE: {
          name: 'Germany',
          cities: {}
       },
       ES: {
          name: 'Spain',
          cities: {}
       },
       order : ['DE', 'ES', 'FR']
    }
 }

Each object would receive an order key, which is an array of the keys for that object. Then when you iterate over the object, you can keep the order using the order key. The downside is that you not only need to maintain the object (add, update, remove) but also the order key as well.

Though I'd highly recommend actually making an array of objects instead of nesting the objects, since object keys have no order.

 EUR: {
    name: 'Europe',
    countries: [{
          name: 'France',
          abbr: 'FR',
          cities: {}
       },{
          name: 'Germany',
          abbr: 'DE',
          cities: {}
       },{
          name: 'Spain',
          abbr: 'ES',
          cities: {}
       }]
 }

Then you could iterate through the EUR.countries array, and sort by either the .name key or the .abbr key.

EDIT: I should probably actually show the iteration to sort them, right?

var sorted = EUR.countries.sort(function(a, b){
    return a.name.toLowerCase() > b.name.toLowerCase();
});

I make the names lowercase because the sort function works with Unicode. If it sorts in the wrong order, just flip the sign.

Sort a Javascript options value alphabetically

1 Answers1