How to swap key and value of JSON element using JavaScript ?
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:
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
- 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:
