✖

All TalkersCode Topics

Follow TalkersCode On Social Media

JavaScript Sort Array Of Objects By Key Value

Last Updated : Jan 1, 2023

IN - JavaScript

JavaScript Sort Array Of Objects By Key Value

In this tutorial we will show you the solution of JavaScript sort array of objects by key value, we know sorting means numeric or string values had sorted to any order (i.e) ascending, descending.

Here defined array of objects then using ‘sort()’ method with dummy parameter.

So we can compare all key values with each other then sorted values stored to original array.

Step By Step Guide On JavaScript Sort Array Of Objects By Key Value :-

Here we defined array ‘a’ with key,value pair. The key is ‘name’ with respective different string values ‘Dhanu,Prawin,Arun,Tamil’ and array ‘a’ using ‘sort()’ method with two parameters ‘a-array,b-dummy array’.

Using that dummy parameter we compares all array key values with each other then result of alphabetically sorted result stored to array ‘a’. Result printed on console using ‘console.log()’ method.

The console.log() method prints any message that need to be displayed to the user.

It accepts a parameter which can be an array, an object or any message and it returns the value of the parameter given. 

<!DOCTYPE html>
<html>
    <head>
        <title>Sort Array</title>
    </head>
    <body>
        <script>
            const a=[{name:"Dhanu"},{name:"Prawin"},{name:"Arun"},{name:"Tamil"}];
            a.sort((a,b)=>(a.name > b.name ? 1:-1));
            console.log(a);
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Within <script> tag we defined an array with key,value pair ‘{name:"Dhanu"},{name:"Prawin"},{name:"Arun"},{name:"Tamil"}’ of objects.
  7. Using sort() method with parameter as array ‘a’ and dummy array ‘b’ parameter for compare with all key ‘name’ values with each other by ‘a.name > b.name’ condition. Then alphabetically sorted key values appends to original array ‘a’.
  8. Result array printed using ‘console.log()’ method. Console.log() is a function in javascript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Its output display on the javascript console.
  9. In browser for open javascript console use the shortcut ‘ctrl+shift+j’ then console panel will open at right hand side there we can see our result.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to sort array of objects by key value in javascript.

When we execute our program on browser we can’t see the result so we have use that shortcut ‘ctrl+shift+j’ then result will see sorted array key,value pair displayed on console by console.log().

The console.log() method only will print any message or value on the console, for general printing, value or string on webpage in javascript we had many inbuilt methods.

We will see about them in future. I hope this tutorial on JavaScript sort array of objects by key value helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials