JavaScript Sort Object By Value
Last Updated : Mar 12, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of JavaScript sort object by value, in the example below we will sort objects by value using the JavaScript built-in function Sort(). Let us know about this sort() function first.
Sort(): this is an array method in JavaScript. It is used to sort an array by modifying the original array. we have to write a compare function into it to sort it in either ascending or descending order.
The syntax for the sort() function is
array.sort([compareFunction]);
Step By Step Guide On JavaScript Sort Object By Value :-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript sort object by value</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> <style> body{ background-color: aliceblue; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } h1{ color : rgb(95, 194, 95) ; font-size: 25px; font-weight : bolder ; } h3{ color : rgb(95, 194, 95) ; font-size: 20px; } </style> </head> <body> </head> <body> <center> <h1> TALKERSCODE </h1> <h3> JavaScript sort object by value </h3> </center> <script> const person = [ {name: "peter", city: "paris"}, {name: "thomas", city: "london"}, {name: "steve", city: "mosco"}, {name: "carol", city: "newyork"}, {name: "rose", city: "seoul"}, {name: "lisa", city: "tokyo"}, ] ; person.sort((person1, person2) => { person1 = person1.name.toLowerCase() ; person2 = person2.name.toLowerCase() ; if(person1<person2) { return -1; } if(person1>person2) { return 1; } return 0; }) ; console.table(person) ; </script> </body> </html>
- Specifying the HTML version of a file is done by writing <!DOCTYPE html> in the HTML code.
- The <HTML> tag, indicating the root of an HTML document, should be included and closed with the </html> tag at the end.
- Metadata for the HTML file is contained within the <head> tag, which is terminated with the </head> tag.
- The HTML document's title is defined using the <title> tag, followed by the </title> tag.
- Styling for the HTML page will be achieved by utilizing an external CSS file.
- CSS can be added using the <style> tag.
- JavaScript can be written within the <script> tag, and it should be closed with the </script> tag.
- Using const to create an object named person. Add some keys and values into it. We will sort this object by value.
- Now using sort() method.
- Into it write two parameters peron1 and person2.
- Convert both of the parameters ‘name’ property to lowercase using toLowerCase() function
- Now create an if condition for if the person1<person2 then return -1.
- Again an if condition is created for if the person1>person2 then return 1.
- If not then return 0
- Using console.table() for displaying the sorted data as table.
Conclusion :-
Lastly, in conclusion, we can say that with this article’s help, we know to sort objects by value using JavaScript.
I hope this article on JavaScript sort object by value helps you and the steps and method mentioned above are easy to follow and implement.