Given an object and the task is to sort the JavaScript Object on the basis of keys. Here are a few of the most used techniques discussed with the help of JavaScript.
Approach 1: By using .sort() method to sort the keys according to the conditions specified in the function and get the sorted keys in the array. To copy the whole object to that temporary variable in the order of keys in a key array(in sorted fashion) and delete the original object will make a temporary variable. After that, we just need to copy the temporary object to the original object and return it.
<!DOCTYPE HTML> <html>   <head>     <title>         How to Sort/Order keys         in JavaScript objects ?     </title>           <style>         body {             text-align: center;         }         h1 {             color: green;         }         #neveropen {             font-size: 20px;             font-weight: bold;         }     </style> </head>   <body>     <h1>neveropen</h1>           <b>         Click on the button to sort         the Object on Keys.         <br>         <pre>Object = {                     CSS: '1',                     JavaScript: '2',                     HTML: '3',                     Python: '4'                     }         </pre>     </b>           <button onclick="gfg_Run()">         Click Here     </button>           <p id="neveropen"></p>           <script>         var el_down = document.getElementById("neveropen");                   var GFG_Object = {             CSS: '1',             JavaScript: '2',             HTML: '3',             Python: '4'         };           // Sorted keys are obtained in 'key' array         function sortKeys(obj_1) {             var key = Object.keys(obj_1)             .sort(function order(key1, key2) {                 if (key1 < key2) return -1;                 else if (key1 > key2) return +1;                 else return 0;             });                           // Taking the object in 'temp' object             // and deleting the original object.             var temp = {};                           for (var i = 0; i < key.length; i++) {                 temp[key[i]] = obj_1[key[i]];                 delete obj_1[key[i]];             }               // Copying the object from 'temp' to             // 'original object'.             for (var i = 0; i < key.length; i++) {                 obj_1[key[i]] = temp[key[i]];             }             return obj_1;         }           function gfg_Run() {             el_down.innerHTML = JSON            .stringify(sortKeys(GFG_Object));         }     </script> </body>   </html> |
Approach 2: In this approach .sort() method sort the keys alphabetically then we have to use .reduce() method on these sorted keys. Then call an anonymous function inside reduce() method with 2 variables(emptyObject and key). Now one by one put the key and value pair in the emptyObject and return it.
- Example 2: This example implements the above approach.
<!DOCTYPE HTML><html>ÂÂ<head>   Â<title>       ÂHow to Sort/Order keys       Âin JavaScript objects ?   Â</title>    Â   Â<style>       Âbody {           Âtext-align: center;       Â}       Âh1 {           Âcolor: green;       Â}       Â#neveropen {           Âfont-size: 20px;           Âfont-weight: bold;       Â}   Â</style></head>ÂÂ<body>   Â<h1>neveropen</h1>    Â   Â<b>       ÂClick on the button to sort       Âthe Object on Keys.<br>       Â<pre>Object = {               ÂCSS: '1',               ÂJavaScript: '2',               ÂHTML: '3',               ÂPython: '4'           Â}       Â</pre>   Â</b>    Â   Â<buttononclick="gfg_Run()">       ÂClick Here   Â</button>    Â   Â<pid="neveropen"></p>    Â   Â<script>       Âvar el_down = document.getElementById("neveropen");    Â       Âvar GFG_Object = {           ÂCSS: '1',           ÂJavaScript: '2',           ÂHTML: '3',           ÂPython: '4'       Â};       Âfunction gfg_Run() {            Â           Â// Getting the keys of JavaScript Object.           ÂModified_Object = Object.keys(GFG_Object)            Â           Â// Sort and calling a method on           Â// keys on sorted fashion.           Â.sort().reduce(function(Obj, key) {                    Â               Â// Adding the key-value pair to the               Â// new object in sorted keys manner               ÂObj[key] = GFG_Object[key];               Âreturn Obj;           Â}, {});           Âel_down.innerHTML =                   ÂJSON.stringify(Modified_Object);       Â}   Â</script></body>ÂÂ</html> - Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
