Accessing nested properties in JavaScript

Question

I am writing some code to sort the columns in a table. (The table is bound to data via KnockOutJS). In order to help automate this process a bit across different tables and pages, I have created an object which has the column names, and the sortPropertyName of the object that column is bound to.

self.headers = [
    { title: 'ID', sortPropertyName: 'organizationId' },
    { title: 'Name', sortPropertyName: 'name' },
    { title: 'City', sortPropertyName: '[address].city' },
    { title: 'State', sortPropertyName: '[address].state' },
    { title: 'Phone Number', sortPropertyName: 'phone' }
];

That sort property is passed to a sort routine, which should then just sort the data based on the sortProperty:

self.sort = function (header, event) {
    var prop = header.sortPropertyName;
    self.people.sort(function (a, b) {
        return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0;
    });
};

(Full credit goes to Ryan Rahlf http://ryanrahlf.com/sorting-tables-by-column-header-with-knockout-js-part-2/ )

This is working fine for properties that are "root" properties, such as Name and ID, however this object has another object called "Address" that contains info such as the City and State, etc. This is breaking the sort() function because I'm not correctly specifying how to get to the "city" and "state" parameters.

For example, in order to access "Name" we can use person.name or person['name'] . In the case of address however, things get a little more complicated. We can use person.address.city or person['address'].city or even person['address']['city'] .

However no combination of formats seems to be working for me in regard to the sortPropertyName that I pass to the sort() function. "Name" works fine, but "City" and "State" do not.

How can I modify my code so that everything works as expected?

Answer 1

You can use something like this to access nested props:

function ref(obj, str) {
    return str.split(".").reduce(function(o, x) { return o[x] }, obj);
}

and then

cmp = function(a, b) { return a > b ? 1 : a < b ? -1 : 0 }

self.people.sort(function (a, b) {
    return cmp(ref(a, "address.city"), ref(b, "address.city"))
}