Sort objects properties by a value of a nested property

Question

I'm currently trying to sort a objects properties bases on a value of the properties properties if that makes sense.

var obj = { 
    1: { name: "Mike", surname: "Smith"},
    2: { name: "Albert", surname: "Einstein"},
    3: { name: "Steve", surname: "Jobs"}
}

Say I want to sort the order of these properties by surname so the end result is

var obj = { 
    2: { name: "Albert", surname: "Einstein"},
    3: { name: "Steve", surname: "Jobs"},
    1: { name: "Mike", surname: "Smith"}
}

Surely there has to be an elegant way of doing this other than putting all the surnames into an array sorting that and then reconstructing the object.

you could use an array, which is sortable, but not an object, which is actually not. — Nina Scholz, Dec 29 '16 at 10:51
@NinaScholz you mean : you could use an array, which is sort able, but not an `object`, which is actually not. — ozil, Dec 29 '16 at 10:53
Possible duplicate of [Sort array of objects by string property value in JavaScript](http://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript) — Marcos Pérez Gude, Dec 29 '16 at 10:53
Its actually ids coming from the database so these might change to anything. — Ernie, Dec 29 '16 at 10:56
JS don't guarantee any order of Objects properties (Object properties can't be ordered). Your initial object and result object are absolutely same. — Arnial, Dec 29 '16 at 10:57
I get that objects property order can't be guarantied, was just hoping there was a way other than moving it to an array. — Ernie, Dec 29 '16 at 10:58
I get what you say now, yes it does and get returned as a string representation of the integer. — Ernie, Dec 29 '16 at 11:04
This is clearly a duplicated post, but nobody seems to notice that. I think is *n*plicated post,not only twice — Marcos Pérez Gude, Dec 29 '16 at 15:21

score 4 · Answer 1 · answered Dec 29 '16 at 10:57

Please try this code:

var arr = [
    {
        f_name: 'George',
        l_name: 'Washington',
        age: 279
    },
    {
        f_name: 'Abraham',
        l_name: 'Lincoln',
        age: 202
    },
    {
        f_name: 'Barack',
        l_name: 'Obama',
        age: 50
    }
];

$(function() {
    $('#headings th').click(function() {
        var id = $(this).attr('id');
        var asc = (!$(this).attr('asc')); // switch the order, true if not set
        
        // set asc="asc" when sorted in ascending order
        $('#headings th').each(function() {
            $(this).removeAttr('asc');
        });
        if (asc) $(this).attr('asc', 'asc');
        
        sortResults(id, asc);
    });
        
    showResults();
});

function sortResults(prop, asc) {
    arr = arr.sort(function(a, b) {
        if (asc) return (a[prop] > b[prop]);
        else return (b[prop] > a[prop]);
    });
    showResults();
}

function showResults () {
    var html = '';
    for (var e in arr) {
        html += '<tr>'
            +'<td>'+arr[e].f_name+'</td>'
            +'<td>'+arr[e].l_name+'</td>'
            +'<td>'+arr[e].age+'</td>'
        +'</tr>';
    }
    $('#results').html(html);
}

table {
    margin: 3px;
}
table th {
    font-weight: bold;
    cursor: pointer;
}
table th, table td {
    padding: 3px;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on the table headings to sort the results.
<table>
    <thead id="headings">
        <tr>
            <th id="f_name">First Name</th>
            <th id="l_name">Last Name</th>
            <th id="age">Age</th>
        </tr>
    </thead>
    <tbody id="results">
        <!-- this will be auto-populated -->
    </tbody>
</table>

This code works but still relays on the original variable being a array, Im actually using angularJS and trying to use ng-repeat on this object and I know it only works with arrays. — Ernie, Dec 29 '16 at 11:06

Ben Aston · Answer 2 · 2016-12-29T11:12:55.737

What you need is an object that has an order. That could be an Array or Map.

You then need to think about your data schema (i.e. the shape of the JSON data emitted from the server). I might move the ID into the objects themselves (the alternative is to make it implicit, which is brittle and error-prone).

[
  {
    "id": 1,
    "name": "Fred", 
    ...
  }
]

At that point it is just a sorting problem.

Array has a sort function on the prototype.

Note if you need to perform a conversion to an array, you can use Array.from:

var obj = { 
  1: { name: "Mike", surname: "Smith" },
  2: { name: "Albert", surname: "Einstein" },
  3: { name: "Steve", surname: "Jobs" },
  length: 4 // largest *zero-based* index 
};

console.log(Array.from(obj));

The resulting array will be sparse (have gaps) so you will then need to filter the result to eliminate them:

Array.from(obj).filter(populated);

function populated(v) {
  return !!v;
}

I was afraid this is the only way, but I think I can make it work. An copy of this gets used by ng-repeat and only there so I guess changing the map to an array of maps for that is not the end of the world. — Ernie, Dec 29 '16 at 11:09

Sort objects properties by a value of a nested property

2 Answers2