Sorting multiple arrays at once

Question

I have 3 arrays :

array 1 is "Name" John, Jim, Jack, Jill
array 2 is "Age" 25, 30, 31, 22
array 3 is "Gender" Male, Male, Male, Female

I have these all listed in a table with a sortable header. Now the sort works fine, it sorts by the "Name" column for example. How can i also make it sort the "Age" and "Gender" arrays to keep them correct. I need to sort all 3 simultaneously.

_nameArray.sort(function(a, b){
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
})

Hope it is explained well enough.

No the structure can not be changed, the way things are it has to be 3 arrays, not one and just sort by the field in the array.

Yeah, a single array of objects would be better suited for this. — Kevin B, Dec 19 '12 at 19:55
If you're using an external source, and can't change what you're getting, I'd say parse them INTO local objects and use those. — Dan Crews, Dec 19 '12 at 19:56
Do any of you have an example for taking multiple arrays, converting them to objects, sorting them, then turning them back into 3 usable arrays? That would be a first for me personally. — Austin Best, Dec 19 '12 at 20:02

Alexander · Answer 1 · 2012-12-19T20:18:55.427

Even though constructing Objects from the multiple arrays may be ideal. You can also do it without the object creation overhead using indirection.

/* An array of indexes */
var idx = [];
for (var i = 0; i < Name.length; i++) {
    idx.push(i);
}

/* A shorthand function */
var comparator = function(arr) {
    return function(a, b) {
        return ((arr[a] < arr[b]) ? -1 : ((arr[a] > arr[b]) ? 1 : 0));
    };
};

/* Sort by Age */
idx = idx.sort(comparator(Age));

/* Get the sorted order */
for (var i = 0; i < Name.length; i++) {
    console.log(Name[idx[i]], Age[idx[i]], Gender[idx[i]]);
}

The idx array contains indexes to the elements of the other arrays, idx[i]. By using indirection you can access the element in Name, Age and Gender; that is, Name[idx[i]].

If performance is a problem then constructing the objects may be faster using in-place sorting, if you just do it once. Otherwise, I would use the indirection without never touching the real arrays.

There you go.

Note: The comparator function is just an example, you need to actually create your own comparator functions based on your criteria.

nice, and more generic than the answer I was writing. – Alnitak Dec 19 '12 at 20:12 — Alnitak, Dec 19 '12 at 20:12
@Alexander: Brilliant! Very impressive. – closure Dec 19 '12 at 20:14 — closure, Dec 19 '12 at 20:14

score 2 · Answer 2 · answered Dec 19 '12 at 20:48

Having tried making objects (as suggested in some of the comments) I'm not sure the added complexity is worth it, but will post it here anyway in case it's useful. In this particular case a Person object serves little purpose and what is potentially more useful is an aggregate object (PersonSet) that will store the joint data, sort it, and deal with the lists of each type of characteristic as input and output. (jsfiddle)

var names = ['John', 'Jim', 'Jack', 'Jill'],
    ages = [25, 30, 31, 22],
    genders = ['male', 'male', 'male', 'female'];
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
function PersonSet(names, ages, genders) {
    this.content = [];
    for (var i = 0; i < names.length; i++) {
        this.content.push(new Person(names[i], ages[i], genders[i]));
        // (alternatively...)
        // this.content.push({name: names[i], age: ages[i], gender: 
        //     genders[i]});
    }
    this.sort = function(aspect) {
        this.content.sort(function(a, b) {
            return ((a[aspect] < b[aspect]) ? -1 : 
                ((a[aspect] > b[aspect]) ? 1 : 0));
        });
    };                    
    this.get = function(aspect) {
        var r = [];
        for (var i = 0; i < this.content.length; i++) {
            r.push(this.content[i][aspect]);
        }
        return r;
    }
}
var personSet = new PersonSet(names, ages, genders);
personSet.sort('age');
console.log(personSet.get('name'), personSet.get('age'), 
            personSet.get('gender'));

Hey from 8+ year later on. :) Well, interesting to see your approach as a Class -like structure but without actually defining a Class. Is that some kind of well-known 'pseudo' structure? Does it have any pros or cons against the traditional real Class - approach? Best wishes — Viktor Borítás, Apr 08 '21 at 15:02
@ViktorBorítás `class` was introduced to javascript in 2015, after I wrote this answer! Until then the function-prototype pattern shown in this answer was [the javascript tradition](https://stackoverflow.com/questions/186244/what-does-it-mean-that-javascript-is-a-prototype-based-language). [`class` is sometimes (inaccurately?) called syntactic sugar](https://stackoverflow.com/questions/36419713/are-es6-classes-just-syntactic-sugar-for-the-prototypal-pattern-in-javascript) sitting on top of the old prototypal pattern. — Stuart, Apr 08 '21 at 18:36
thank you for enlightening me with this interesting piece of fact from the history. :) Take care! — Viktor Borítás, Apr 08 '21 at 18:42

score 0 · Answer 3 · answered Dec 19 '12 at 20:01

0

If you are wanting to sort the data in a table you should have a look at Tablesorter

answered Dec 19 '12 at 20:01

Rick

1,063
8
26

I already have a table sorter, but thank you. The problem is they do not carry styles, onclicks, etc. They tend to write their on and append it to a new table, only keeping the html of the td its self. – Austin Best Dec 19 '12 at 20:04

score 0 · Answer 4 · answered Dec 19 '12 at 20:04

Given your constraint why not just write your own sort function. Inside the sort function maintain all the arrays like:

Find the lowest item. Say it is at index 5. Now swap item@index5 with item@index0 in all 3 arrays.

Repeat the above logic starting from index 1...

Sorting multiple arrays at once

4 Answers4

Linked