Sort Keys in Javascript Object

Question

I have a Javascript Object that contains a mix of property types including simple strings, objects, arrays of objects... and so on.

I would like to sort the keys following this rule:

'Simple properties like strings or numbers appears always before more complex properties that contains arrays or objects'

I wrote the following function, that almost do what I am trying to achieve, but it converts the arrays into objects. This is not the desired behaviour. Can anybody help me to create a function that keep arrays as arrays and at the same time it sorts the objects inside arrays?

function sort(object){
    if (typeof object != "object" )
        return object;
    var keys = Object.keys(object);
    keys.sort(function(a,b){
            if (typeof(object[a])!== 'object') { return -1 } else { return 1 }
        });

Working jsfiddle:

http://jsfiddle.net/u01mn2py/3/

Kind Regards

Answer 1

(See ECMAScript 2015 update below.)

Properties in JavaScript objects have no order. You cannot control the order in which the properties are visited in a for-in loop or similar.

Some specific implementations may seem to demonstrate some form of order (for instance, the order in which the properties were added to the object), but this is undefined behavior and you cannot rely on it.

If you want order, you'll need an array of property names that you then loop through to get the property values in your desired order. That doesn't change the order of the properties in the object (there is none), it just makes it possible for you to visit those properties in the order you want.

---

Update: As of ECMAScript 2015 (ES6), properties do have order:

1. Let keys be a new empty List.
2. For each own property key P of O that is an integer index, in ascending numeric index order
   • Add P as the last element of keys.
3. For each own property key P of O that is a String but is not an integer index, in property creation order
   • Add P as the last element of keys.
4. For each own property key P of O that is a Symbol, in property creation order
   • Add P as the last element of keys.
5. Return keys.

That's for "own" properties; they're then followed by the object's prototype's properties, in the same order (ignoring those that have been shadowed), and so on.

This means that it's probably possible to do what you asked, on a compliant engine. JSON still has no order, but I'd give odds that any browser's JSON.stringify is going to use object iteration to do its job, so it's likely (not guaranteed!) that the resulting JSON will be in the order you create for the object.

I'm not saying I suggest it. :-)

function sort(object) {
    // Don't try to sort things that aren't objects
    if (typeof object != "object") {
        return object;
    }

    // Don't sort arrays, but do sort their contents
    if (Array.isArray(object)) {
        object.forEach(function(entry, index) {
            object[index] = sort(entry);
        });
        return object;
    }

    // Sort the keys
    var keys = Object.keys(object);
    keys.sort(function (a, b) {
        var atype = typeof object[a],
            btype = typeof object[b],
            rv;
        if (atype !== btype && (atype === "object" || btype === "object")) {
            // Non-objects before objects
            rv = atype === 'object' ? 1 : -1;
        } else {
            // Alphabetical within categories
            rv = a.localeCompare(b);
        }
        return rv;
    });

    // Create new object in the new order, sorting
    // its subordinate properties as necessary
    var newObject = {};
    keys.forEach(function(key) {
        newObject[key] = sort(object[key]);
    });
    return newObject;
}

Updated Fiddle

(You didn't ask for alphabetical within categories, but it seemed a reasonable thing to throw in.)

That works for me on current Chrome, Firefox, and IE11.

Answer 2

I know I can't relay on javascript properties order, but I need visually to show sorted JSON. Solved in this way:

http://jsfiddle.net/u01mn2py/4/

function sort(object){
    if (typeof object != "object" ) // Not to sort the array
        return object;
    var keys = Object.keys(object);
    keys.sort(function(a,b){
            if (typeof(object[a])!== 'object') { return -1 } else { return 1 }
        });
    if( Object.prototype.toString.call( object ) === '[object Array]' ) {
        var newObject = [];
     } else {
        var newObject = {}; }

     for (var i = 0; i < keys.length; i++){
            newObject[keys[i]] = sort(object[keys[i]])
      }
    return newObject;
}