Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 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:

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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!