All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Sort Object By Value

Last Updated : Mar 12, 2024

JavaScript Sort Object By Value

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>
  1. Specifying the HTML version of a file is done by writing <!DOCTYPE html> in the HTML code.
  2. The <HTML> tag, indicating the root of an HTML document, should be included and closed with the </html> tag at the end.
  3. Metadata for the HTML file is contained within the <head> tag, which is terminated with the </head> tag.
  4. The HTML document's title is defined using the <title> tag, followed by the </title> tag.
  5. Styling for the HTML page will be achieved by utilizing an external CSS file.
  6. CSS can be added using the <style> tag.
  7. JavaScript can be written within the <script> tag, and it should be closed with the </script> tag.
  8. Using const to create an object named person. Add some keys and values into it. We will sort this object by value.
  9. Now using sort() method.
  10. Into it write two parameters peron1 and person2.
  11. Convert both of the parameters ‘name’ property to lowercase using toLowerCase() function
  12. Now create an if condition for if the person1<person2 then return -1.
  13. Again an if condition is created for if the person1>person2 then return 1.
  14. If not then return 0
  15. 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.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪