JavaScript | How to add an element to a JSON object?

Last Updated : 27 May, 2019

In order to add Key/value pair to a JSON object, Either we use dot notation or square bracket notation. Both methods are widely accepted.

Example 1: This example adds {“prop_4” : “val_4”} to the GFG_p object by using dot notation.

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!

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | 
      Add a key/value pair to JSON object 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <p id="GFG_up"
       style=" font-weight: bold"> 
    </p> 
  
    <button onclick="Geeks()"> 
        Click to add 
    </button> 
  
    <p id="GFG_down" 
       style="color:green; 
              font-weight: bold" ;> 
    </p> 
  
    <script> 
        var GFG_p = { 
            prop_1: "val_1", 
            prop_2: "val_2", 
            prop_3: "val_3" 
        }; 
        var p_up =  
            document.getElementById("GFG_up"); 
        var p_down =  
            document.getElementById("GFG_down"); 
        p_up.innerHTML =  
          JSON.stringify(GFG_p); 
  
        function Geeks() { 
            GFG_p.prop_4 = "val_4"; 
            p_down.innerHTML = JSON.stringify(GFG_p); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example 2: This example adds {“prop_4” : “val_4”} to the GFG_p object by using square bracket notation.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Add a key/value pair to JSON object 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <p id="GFG_up"
       style=" font-weight: bold"> 
    </p> 
  
    <button onclick="Geeks()"> 
        Click to add 
    </button> 
  
    <p id="GFG_down" 
       style="color:green;  
              font-weight: bold" ;> 
    </p> 
  
    <script> 
        var GFG_p = { 
            prop_1: "val_1", 
            prop_2: "val_2", 
            prop_3: "val_3" 
        }; 
        var p_up =  
            document.getElementById("GFG_up"); 
        var p_down =  
            document.getElementById("GFG_down"); 
        p_up.innerHTML =  
          JSON.stringify(GFG_p); 
  
        function Geeks() { 
            GFG_p["prop_4"] = "val_4"; 
            p_down.innerHTML = JSON.stringify(GFG_p); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles

Table of Contents

JavaScript | How to add an element to a JSON object?