How to swap key and value of JSON element using JavaScript ?

24 Oct, 2019
Given a JSON object and the task is to swap the JSON object key with values and vice-versa with the help of JavaScript.
Approach 1:
Create a new empty object.
Visit every key of object by for loop and add the elements from old object to the new object in reverse form(by swapping the key and values).
Example: This example implements the above approach.
<!DOCTYPE HTML> <html>   <head>     <title>         How to swap key and value of        JSON element using JavaScript ?    </title>     </head>   <body style = "text-align:center;">           <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <p id = "GFG_UP1" style =         "font-size: 15px; font-weight: bold;">     </p>          <p id = "GFG_UP2" style = "font-size: 15px;            font-weight: bold; color: green;">     </p>          <button onclick = "GFG_Fun()">         click here     </button>           <p id = "GFG_DOWN" style = "color:green;        font-size: 20px; font-weight: bold;">     </p>               <script>         var up1 = document.getElementById('GFG_UP1');         var up2 = document.getElementById('GFG_UP2');         var down = document.getElementById('GFG_DOWN');                  var obj = {            "Prop_1": "Val_1",             "Prop_2": "Val_2",            "Prop_3": "Val_3"        };                  up1.innerHTML = "Click on the button to swap"                + " the key with values.";                  up2.innerHTML = JSON.stringify(obj);                  function swapValues(j){            var res = {};            for(var key in j){                res[j[key]] = key;            }            return res;        }                  function GFG_Fun() {            down.innerHTML =                   JSON.stringify(swapValues(obj));        }     </script> </body>   </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Create a new empty object.
For each key of the object, add the elements from old object to the new object in reverse form (by swapping the key and values). Using .ForEach() method
Example: This example implements the above approach.
<!DOCTYPE HTML> <html>   <head>     <title>         How to swap key and value of JSON        element using JavaScript ?    </title>     </head>   <body style = "text-align:center;">           <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <p id = "GFG_UP1" style =         "font-size: 15px; font-weight: bold;">     </p>          <p id = "GFG_UP2" style = "font-size: 15px;        font-weight: bold; color: green;">     </p>          <button onclick = "GFG_Fun()">         click here     </button>           <p id = "GFG_DOWN" style = "color:green;        font-size: 20px; font-weight: bold;">     </p>           <script>         var up1 = document.getElementById('GFG_UP1');         var up2 = document.getElementById('GFG_UP2');         var down = document.getElementById('GFG_DOWN');                  var obj = {            "Prop_1": "Val_1",            "Prop_2": "Val_2",            "Prop_3": "Val_3"        };                  up1.innerHTML = "Click on the button to "                + "swap the key with values.";                  up2.innerHTML = JSON.stringify(obj);                  function swapValues(o) {            const res = {};                          Object.keys(o).forEach(key => {                res[o[key]] = key;            });            return res;        }                  function GFG_Fun() {            down.innerHTML =                    JSON.stringify(swapValues(obj));        }     </script> </body>   </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-object
JSON
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?