How to Sort Array Based on Multiple Fields in JavaScript

In this tutorial we will create a How to Sort Array Based on Multiple Fields. This tutorial goal is to help those who want to learn more about arrays. This cover all the important parts where you can dynamically sort out an array object. I will provide a sample program to show the actual coding of this tutorial. So Let's do the coding.

What is JavaScript Array?

In JavaScript, an array is somewhat you call an ordered list of values. Each value is called an element with a specific index: A JavaScript array has different characteristics: First, an array can hold values of mixed types. It can have an array that stores elements with the types number, string, boolean, and null.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display an interface that will append the array object later. To create this simply copy and write it into your text editor, then save it as index.html.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  6. </head>
  7. <nav class="navbar navbar-default">
  8. <div class="container-fluid">
  9. <a class="navbar-brand" href="https://www.sourcecodester.com">Sourcecodester</a>
  10. </div>
  11. </nav>
  12. <div class="container-fluid">
  13. <div class="row">
  14. <div class="col-md-3"></div>
  15. <div class="col-md-6 well">
  16. <h3 class="text-primary">How to Sort Array Based on Multiple Fields</h3>
  17. <hr style="border-top: 1px SOLID #8c8b8b;"/>
  18. <pre id="display"></pre>
  19. <button onclick="sort();">Sort</button> <button onclick="reset();">Reset</button>
  20. </div>
  21. </div>
  22. </div>
  23. </body>
  24. </html>

Creating JavaScript Function

This is where the main function of the application is. This code will code will dynamically sort the array object with a conditional method. To do this just copy and write these block of codes after the body closing tag.
  1. <script>
  2. var data = [
  3. {
  4. "name": "John Smith",
  5. "age": "21",
  6. "status": "Non-Regular"},
  7. {
  8. "name": "Claire Temple",
  9. "age": "20",
  10. "status": "Regular"},
  11. {
  12. "name": "Sophia Jose",
  13. "age": "19",
  14. "status": "Regular"},
  15. ];
  16.  
  17. function reset(){
  18. window.location="index.html";
  19. }
  20.  
  21.  
  22. function sort(){
  23.  
  24. let result = data.sort((a,b) =>{
  25. if(a.status=='Regular'){
  26. return -1
  27. }
  28. return 1
  29.  
  30. })
  31.  
  32. document.getElementById("display").innerHTML=JSON.stringify(result, null, 2);
  33.  
  34. }
  35. document.getElementById("display").innerHTML=JSON.stringify(data, null, 2);
  36. </script>

In this code we display first the array object using the JSON.stringify() function. After that when bind the button in onclick function. To sort the array object we use the sort() function that include the sorting option of how we will sort the data. In my case I want to sort out the status object where the Regular value will display at the top first. I use a conditional if to target the status object where the value is Regular sort it on top list.

Output:

The How to Sort Array Based on Multiple Fields in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Sort Array Based on Multiple Fields in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment