Skip to main content

How to multi sort in array object using vanilla JavaScript



Introduction

Vanilla JavaScript comes handy with a lot of in build features that deal with data structures. But some of them are very complex and we don’t get expected results without doing the workarounds. By the way, I got stuck with sorting an array object with multiple fields. After a lot of research, I got the expected result. In this article, I penned down my research work and if you read this entire article you will get to know how to multi sort in array objects using vanilla JavaScript.

Example use  case

Let us consider the example of an employee array object for which you should do the multi sort based on address field first and then name field



Expected Output



Problem Statement

The array will not have any inbuilt functionality to sort multiple criteria by default. Let us see the output of Array.sort() method


I believe the above-mentioned sort function will greatly work with a one-dimensional integer and string array. But think about complex object array like above, the default sort function will not work for your customized sorting needs. 

Approach

We can add customized topping function to Array.sort() method like Array.sort(multiSortCompareFn) where multiSortCompareFn is a call back function which does the stuff for us to do customized multi sorting for an array

Compare Function

Before customized multiSortCompareFn  we need to know what does normal Compare function will do for us

Normally it would take two elements a and b as input. If a is greater than b then it will swap a and b  and if a is lesser than b then it will swap b and a. Likewise, the compare function will do several passes until the end of the array to perform sorting. Then the output will be

How can we apply customized sort function to perform multi sorting?


According to our sample requirement, we need to do multi sort based on the address and then name where it takes employees as a complex object. The idea  here is that if the first address and second address element are equal then we will do sorting on first name and second name element
            1.       If the first name element is element is lesser than the second name element then swap second and first name element
 2.       If the first name element is greater than the second name element then swap first name and second name element
 3.       No swap if both name elements are equal
If the first address element and second address element is not equal then it will do the following
            1.       If the first address element is lesser than the second address element then swap second and first address elements
 2.       If the first address element is greater than the second address element then swap first address element and second address element
This pass will go until the end of the array of the employee's complex object  then the output will be

This is what we expect in the requirement

Conclusion

I Believe that this article will help to the fellow developers like me who are trying to resolve the same kind of issue. Feel free to post your comments which will be helpful for me to improvise myself.


Labels:

Comments

Post a Comment

Popular posts from this blog

How to resolve ASP.NET core web API 2 mins timeout issue

Introduction We are in the new world of microservices and cross-platform applications which will be supported for multiple platforms and multiple heterogeneous teams can work on the same application. I like ASP.NET Core by the way its groomed to support modern architecture and adhere to the software principles. I am a big fan of dot net and now I become the craziest fan after seeing the sophisticated facility by dot net core to support infrastructure level where we can easily perform vertical and horizontal scaling. It very important design aspect is to keep things simple and short and by the way, RESTFul applications are build and it is a powerful mantra for REST-based application and frameworks. Some times we need to overrule some principles and order to handle some situations. I would like to share my situation of handling HTTP long polling to resolve the ASP.Net core 2 mins issue. What is HTTP Long polling? In the RESTFul term, when a client asks for a query from the serv
6 comments
Read more

How to Resolve ASP.NET Core Key Protection Ring Problem in AWS Lambda

Introduction When it comes to server less web application design using asp.net core razor pages, we definitely need to consider a factor of data protection key management and its lifetime in asp.net core. I developed a site using AWS toolkit of ASP.NET Core Razor Pages. The main advantage of ASP.NET Core is cross-platform from where we can deploy our application in MAC, Linux or windows. I deployed my site initially in IIS Server from which I got the results as expected .but later period I decided to host my site in AWS Lambda in order to meet our client requirement. Strangely, I got unexpected behavior from my site. I just refer the cloud information Lambda Log to identify or pinpoint the case, I got the error Information like “Error Unprotecting the session cookie” from the log. In this article, I tried to explain the root cause of the problem and its solution to overcome such kind of issue. Data Protection in ASP.NET Core This is feature in ASP.NET Core which acts as repl
4 comments
Read more

Which linq method performs better: Where(expression).FirstorDefault() vs .FirstOrDefault(expression)

 Introduction When it comes to LINQ, we always have multiple options to execute the query for the same scenario. Choosing correct one is always challenging aspect and debatable one. In one of our previous articles   Any Vs Count  , we have done performance testing about best LINQ methods over .NET types. In this article, I would like to share about  Where(expression).FirstorDefault() vs .FirstOrDefault(expression) Approaches Performance testing for  Where(expression).FirstorDefault() vs .FirstOrDefault(expression) is very interesting IEnumerable<T> or ICollcetion<T>  .FirstOrDefault(expression) is better than  Where(expression).FirstorDefault() Public API To check the performance, I need some amount of data which should already available. So I decided to choose this  public api . Thanks to publicapis Public API Models Entry class using System ; using System.Collections.Generic ; using System.Text ;   namespace AnyVsCount { public class Entry { pub
Post a Comment
Read more