In javascript, can I create a sort function that puts the top 10 count on top, sorted by alphabet?

Question

I have a set of colours and the number of products found in that colour:

[
  {colour: 'red', count: 100},
  {colour: 'green', count: 30},
  {colour: 'blue', count: 80},
  ...
]

The list is much longer than this. I want:

• to show the top ten colours with the highest count on top of the list,
• but sort that top 10 by alphabet.

I can only use a js compareFunction, once. Is there a way to achieve this?

---

Supplemental, I'm trying to get this sorting result in using the refinementList of the Algolia InstantSearch library. As documented, the sortBy can only take a single sorting function. If anyone has a different solution for that then that would of course also suffice.

I'm rather surprised by the eagerness of people to provide answers that don't fit the requirements. Regardless of the use case, this seems to me like an interesting problem to actually find a solution to.

Answer 1

You could use a two pass style, for getting first the top values and the order the array be top value and by alphabet.

The result contains all items, the ten top items in the first part ordered by name and the rest is also ordered by name, but not first.

var data = [{ colour: 'red', count: 100 }, { colour: 'green', count: 30 }, { colour: 'blue', count: 80 }, { colour: 'white', count: 40 }, { colour: 'black', count: 5 }, { colour: 'pink', count: 8 }, { colour: 'yellow', count: 99 }, { colour: 'cyan', count: 37 }, { colour: 'magenta', count: 32 }, { colour: 'grey', count: 23 }, { colour: 'mint', count: 13 }, { colour: 'brown', count: 18 }, { colour: 'orange', count: 1 }, { colour: 'x', count: 0 }, { colour: 'b', count: -1 }, { colour: 'a', count: -2 }, { colour: 'y', count: -4 }],
    count = data.reduce(function (r, a, i) {
        var min;
        if (r.length < 10) {
            return r.concat(a.count);
        }
        min = Math.min(...r);
        if (a.count > min) {
            r[r.indexOf(min)] = a.count;
        }
        return r;
    }, []);

data.sort(function (a, b) {
    return count.includes(b.count) - count.includes(a.count) || a.colour.localeCompare(b.colour);
});

console.log(data);

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

Answer 2

This will sort regardless of the count after determining the top 'n' records. So, ordered by descending order it will then re-sort on this sliced array using the second dynamic array object property colour to order alphabetically:

// example array:
const arr = [
    {colour: 'blue', count: 10},
    {colour: 'red', count: 100},
    {colour: 'red', count: 101},
    {colour: 'green', count: 30},
    {colour: 'green', count: 40},
    {colour: 'blue', count: 100},
    {colour: 'white', count: 40},
    {colour: 'orange', count: 40}
];

// multiple sort function:
const orderedCollection = (arr, n, ...props) => {
  return arr
   // create a copy of the array
   .slice(0)
        // sort by descending order i.e "count"
        .sort((a, b) => b[props[0]] - a[props[0]])
        // take 'n' number of records i.e 5
        .slice(0, n)
        // sort alphabetically (a-z), based on property i.e "colour"
        .sort((a, b) => {
        if (a[props[1]] < b[props[1]]) return -1;
        if (a[props[1]] > b[props[1]]) return 1;
        return 0;
     });
};

// top 5, using props count & colour.
orderedCollection(arr, 5, "count", "colour")
 .forEach((obj, index) => { 
           // example output:
           console.log(`${index +1}. ${obj.colour} - ${obj.count}`);
         });

Answer 3

var arr = [
  {colour: 'red', count: 100},
  {colour: 'green', count: 30},
  {colour: 'blue', count: 80},
  {colour: 'red', count: 17},
  {colour: 'green', count: 50},
  {colour: 'blue', count: 8},
  {colour: 'red', count: 16},
  {colour: 'green', count: 45},
  {colour: 'blue', count: 35},
  {colour: 'red', count: 15},
  {colour: 'green', count: 25},
  {colour: 'blue', count: 20},
  {colour: 'red', count: 10},
  {colour: 'green', count: 40},
  {colour: 'blue', count: 70}
]
arr.sort(function(a, b) {
   return  b['count'] - a['count'];
})
arr.splice(10)
arr.sort(function(a, b) {
  var nameA = a.colour.toUpperCase(); // ignore upper and lowercase
  var nameB = b.colour.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
// names must be equal
  return 0;
});
console.log(arr);

fiddle link

Answer 4

this should provide some insight in how you can sort custom arrays. if you swap a and b around you'll sort into the opposite direction.

yes i'm aware you said you'd only want to use one compare function call but honestly.. if a prof is forcing you to do so, you might want to consider switching courses or make him realize his idiology is dumb for practical use.

after all, stackoverflow is not made to answer questions that have no relation to unefficient usecases.

[
  {colour: 'red', count: 100},
  {colour: 'green', count: 30},
  {colour: 'blue', count: 80},
  {colour: 'pink', count: 1337},
  {colour: 'black', count: 10},
  {colour: 'orange', count: 101}
]
// sort by count
.sort((a, b) => b.count - a.count)
// extract first three colours
.splice(0, 3)
// sort by text
.sort((a, b) => a.colour > b.colour ? 1 : a.colour < b.colour ? -1 : 0)
// print the result into the console
.forEach((x, i) => console.log(`${['first', 'second', 'third'][i]}: ${x.colour}`));

Answer 5

Step 1 : Use Array.sort() method

sorting the Array elements(objects) by their count (descending). Here's the comparison function that does this :

var sortByCount = jsonObj.sort(function(a, b) {
    return b.count - a.count;
});

Here, jsonObj is the source array of objects which is unsorted.

Step 2 : Use Array.slice() to get top 10 records from the sorted array

Syntax : array.slice(start, end)

var sortByCount = jsonObj.sort(function(a, b) {
    return b.count - a.count;
});

var topTen = sortByCount.slice(0,10);

Step 3 : Again sort the top 10 records based on the alphabet in ascending order.

var sortByCount = jsonObj.sort(function(a, b) {
    return b.count - a.count;
});

var topTen = sortByCount.slice(0,10);

var sortByName = topTen.sort(function(a, b) {
    if(a.colour < b.colour) return -1;
    if(a.colour > b.colour) return 1;
    return 0;
});

Working Demo

var jsonObj = [
  {colour: 'red', count: 100},
  {colour: 'green', count: 30},
  {colour: 'zlue', count: 40},
  {colour: 'dlue', count: 90},
  {colour: 'ylue', count: 20},
  {colour: 'blue', count: 25},
  {colour: 'jlue', count: 45},
  {colour: 'klue', count: 2556},
  {colour: 'slue', count: 46},
  {colour: 'xlue', count: 745},
  {colour: 'qlue', count: 76},
  {colour: 'tlue', count: 65}
];

var sortByCount = jsonObj.sort(function(a, b) {
    return b.count - a.count;
});

var topTen = sortByCount.slice(0,10);

var sortByName = topTen.sort(function(a, b) {
    if(a.colour < b.colour) return -1;
    if(a.colour > b.colour) return 1;
    return 0;
});

console.log(sortByName);

Answer 6

For that first, you need to use array sort function on count(numbers) and then on color(Text). To fetch the top data, you can use array slice. Just refer the basic JavaScript functions and try yourself. See below code:

<script type="text/javascript">
        var colorsarray = [
                            {colour: 'red', count: 100},
                            {colour: 'green', count: 30},
                            {colour: 'blue', count: 80},
                            {colour: 'yellow', count: 60},
                            {colour: 'purple', count: 50},
                            {colour: 'pink', count: 10},
                            {colour: 'brown', count: 90},
                            {colour: 'black', count: 70},
                            {colour: 'white', count: 20},
                            {colour: 'gold', count: 110},
                            {colour: 'silver', count: 150},
                            {colour: 'orange', count: 130},
                            {colour: 'grey', count: 40},
        ];

        colorsarray.sort(function(a, b){
            return a.count-b.count
        });

        colorsarray.sort(function(a, b){
            var name1=a.colour.toLowerCase(), 
            var name2=b.colour.toLowerCase(),
            if (name1 < name2)
                return -1 
            if (name1 > name2)
                return 1
            return 0
        });

        console.log(colorsarray.slice(1,10));
    </script>