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:

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

Recommended Posts: