JavaScript: Sorting array accorting to "outside" parameter

Question

In JavaScript, I have an array of objects and an input value like this:

const inputVal = 'foo';

const objArray = [
    {title: 'blahaa', type: 'foobar'},
    {title: 'foobar', type: 'wohoo'},
    {title: 'foobar', type: 'foobar'},
    {title: 'foobar', type: 'aaaabaa'},
    {title: 'foobar', type: 'moo'},
    {title: 'aaah', type: 'foogoo'},
    {title: 'foohiii', type: 'foobar'},
    {title: 'aaah', type: 'foobar'},
    {title: 'foodoo', type: 'aaaabaa'},
    {title: 'gaaaaaah', type: 'foobar'},
    {title: 'foobar', type: 'foogoo'},
];

As you can see, all elements in the array have properties starting with "foo" in either the title or the type. Also, all elements are unique, the same title and/or type can be in several elements, but the same combination of both cannot appear twice.

I want to sort this array in the following way:

Both title and type starts with inputVal
1. Type alphabetically
2. Title alphabetically
Title starts with inputVal but not type
1. Type alphabetically
2. Title alphabetically
Type starts with inputVal but not title
1. Type alphabetically
2. Title alphabetically

The example list would be sorted as following:

const objArray = [
    {title: 'foobar', type: 'foobar'}, // Criterium 1
    {title: 'foohiii', type: 'foobar'}, // Criterium 1
    {title: 'foobar', type: 'foogoo'}, // Criterium 1
    {title: 'foobar', type: 'aaaabaa'}, // Criterium 2
    {title: 'foodoo', type: 'aaaabaa'}, // Criterium 2
    {title: 'foobar', type: 'moo'}, // Criterium 2
    {title: 'foobar', type: 'wohoo'}, // Criterium 2
    {title: 'aaah', type: 'foobar'}, // Criterium 3
    {title: 'blahaa', type: 'foobar'}, // Criterium 3
    {title: 'gaaaaaah', type: 'foobar'}, // Criterium 3
    {title: 'aaah', type: 'foogoo'}, // Criterium 3
];

I tried using array.prototype.sort(callback) with several different callback functions, but I don't seem to get the correct one. Can anyone help me?

Please add your attempt to the question. Have you tried using startsWith? — adiga
– adiga, Commented Aug 14, 2019 at 11:36
why is aaah below gaaaaah? in the original order both have a different order and no rule switches them. — Nina Scholz
– Nina Scholz, Commented Aug 14, 2019 at 11:58

Nina Scholz · Accepted Answer · 2019-08-14 12:14:13Z

You could chanin the criteria and sort by the three groups first and then by the values.

const
    value = 'foo',
    start = (v => s => s.startsWith(v))(value),
    array = [{ title: 'blahaa', type: 'foobar' }, { title: 'foobar', type: 'wohoo' }, { title: 'foobar', type: 'foobar' }, { title: 'foobar', type: 'aaaabaa' }, { title: 'foobar', type: 'moo' }, { title: 'aaah', type: 'foogoo' }, { title: 'foohiii', type: 'foobar' }, { title: 'aaah', type: 'foobar' }, { title: 'foodoo', type: 'aaaabaa' }, { title: 'gaaaaaah', type: 'foobar' }, { title: 'foobar', type: 'foogoo' }];
    
array.sort((a, b) =>
       (start(b.title) && start(b.type)) - (start(a.title) && start(a.title))
    || start(b.title) - start(a.title)
    || start(b.type) - start(a.type)
    || a.type.localeCompare(b.type)
    || a.title.localeCompare(b.title)
);

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Sackey · Accepted Answer · 2019-08-14 20:07:36Z

Here is another solution, probably less efficient due to the use of multiple regex.

const objArray = [
    {title: 'blahaa', type: 'foobar'},
    {title: 'foobar', type: 'wohoo'},
    {title: 'foobar', type: 'foobar'},
    {title: 'foobar', type: 'aaaabaa'},
    {title: 'foobar', type: 'moo'},
    {title: 'aaah', type: 'foogoo'},
    {title: 'foohiii', type: 'foobar'},
    {title: 'aaah', type: 'foobar'},
    {title: 'foodoo', type: 'aaaabaa'},
    {title: 'gaaaaaah', type: 'foobar'},
    {title: 'foobar', type: 'foogoo'}
];

const input = "foo";

const sortedObjArray = [
    objArray.sort((a, b) => {
        const
            regex = new RegExp("^(" + input + ")?(.*)", "i"),
            titleAExec = regex.exec(a.title),
            typeAExec = regex.exec(a.type),
            titleBExec = regex.exec(b.title),
            typeBExec = regex.exec(b.type)

        const
            titleComparison = titleAExec[2].localeCompare(titleBExec[2]),
            typeComparison = typeAExec[2].localeCompare(typeBExec[2])

        if (titleAExec[1] && !titleBExec[1])
            return -1
        else if (titleBExec[1] && !titleAExec[1])
            return 1

        if (typeAExec[1] && !typeBExec[1])
            return -1
        else if (typeBExec[1] && !typeAExec[1])
            return 1

        if (typeComparison === 0)
            return titleComparison

        return typeComparison;
    })
]

console.log(sortedObjArray)

Baljinder Singh · Accepted Answer · 2019-08-14 12:10:09Z

-1

You can try the following:

Split array in 3 subarrays using Array.prototype.filter based on 3 Criterias as mentioned above.
Sort 3 subarrays independently and then concatenate using Array.prototype.concat

To improve performance, process all subarrays asynchronously. Divide and Conquer wins!

answered Aug 14, 2019 at 12:10

Baljinder Singh

11 bronze badge

7 Comments

Kobe Over a year ago

Filter wouldn't work here filter removes elements, rather, sort would. You've generalised the problem and haven't provided a clear solution. Asynchronicity is unrelated to this problem. Try creating a runnable solution instead, that actually works, and backup why it would work, rather than just stating it.

Baljinder Singh Over a year ago

By split I meant doing this -> jsfiddle.net/y1wL7dsq and now each array can be alphabetically sorted in async before doing concat.

Kobe Over a year ago

Why don't you make a snippet here then, showing what you mean?

Kobe Over a year ago

It worked, but you can place that code into a snippet here.

Baljinder Singh Over a year ago

I still don't understand why my answer is downvoted. I assumed OP is already familiar with sorting alphabetically and only provided the main logic that was required.

|

Collectives™ on Stack Overflow

JavaScript: Sorting array accorting to "outside" parameter

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related