How to sort an array of objects in particular order in jquery

Question

Hi I want to sort an array of objects in particular order. I am giving the array before sorting:

var arrayBeforeSort = [
    {simulationID: '45679', colorName:'Green'},
    {simulationID: '45672', colorName:'red'},
    {simulationID: '45676', colorName:'yellow'},
    {simulationID: '45675', colorName:'Green'},
    {simulationID: '45677', colorName:'default'},
    {simulationID: '45673', colorName:'red'},
    {simulationID: '45680', colorName:'Green'},
    {simulationID: '45678', colorName:'default'}
]

I want to sort it like this:

var arrayAfterSort = [
    {simulationID: '45679', colorName:'Green'},
    {simulationID: '45675', colorName:'Green'},
    {simulationID: '45680', colorName:'Green'},
    {simulationID: '45672', colorName:'red'},
    {simulationID: '45673', colorName:'red'},
    {simulationID: '45676', colorName:'yellow'},
    {simulationID: '45677', colorName:'default'},
    {simulationID: '45678', colorName:'default'}
]

So basically I want to sort the array according to below order. Green will come first then Red will come then yellow then default. So sorting order will be Green,Red,Yellow,Default.

Have you made any attempt to sort it yourself yet, perhaps by using `.sort`? — CertainPerformance, Jul 25 '18 at 06:28

score 2 · Answer 1 · edited Jul 25 '18 at 06:57

You can simply use Arrays.sort() and use an order array to sort the array in the order specified by the order array.

Try the following:

var arrayBeforeSort = [ {simulationID: '45679', colorName:'Green'}, {simulationID: '45672', colorName:'red'}, {simulationID: '45676', colorName:'yellow'}, {simulationID: '45675', colorName:'Green'}, {simulationID: '45677', colorName:'default'}, {simulationID: '45673', colorName:'red'}, {simulationID: '45680', colorName:'Green'}, {simulationID: '45678', colorName:'default'} ];

var order = ["Green","red","yellow","default"];
 
arrayBeforeSort.sort((a,b)=> order.indexOf(a.colorName) - order.indexOf(b.colorName));
 
console.log(arrayBeforeSort);

score 2 · Answer 2 · edited Jul 25 '18 at 06:58

You can specify a object like sortOrder to mention the numeric value for the sort values so that they can be used inside the sort() function:

var arrayBeforeSort = [
    {simulationID: '45679', colorName:'Green'},
    {simulationID: '45672', colorName:'red'},
    {simulationID: '45676', colorName:'yellow'},
    {simulationID: '45675', colorName:'Green'},
    {simulationID: '45677', colorName:'default'},
    {simulationID: '45673', colorName:'red'},
    {simulationID: '45680', colorName:'Green'},
    {simulationID: '45678', colorName:'default'}
];
var sortOrder = {
  'Green': 1,
  'red' : 2,
  'yellow' : 3,
  'default' : 4
};

arrayBeforeSort.sort(function(a, b){
  return sortOrder[a.colorName] - sortOrder[b.colorName];
});
console.log(arrayBeforeSort);

score 1 · Answer 3 · answered Jul 25 '18 at 06:36

First, define the value for the color based on your desired result. From there, you can compare them.

var colorArray = [];
colorArray['Green'] = 0;
colorArray['red'] = 1;
colorArray['yellow'] = 2;
colorArray['default'] = 3;
console.log(arrayBeforeSort.sort(function(a,b){
    return colorArray[a.colorName] > colorArray[b.colorName];
}));

How to sort an array of objects in particular order in jquery

3 Answers3