JavaScript | Add new attribute to JSON object
The task is to add a JSON attribute to the JSON object. To do so, Here are a few of the most used techniques discussed.
Example 1: This example adds a prop_11 attribute to the myObj object via var key.
html
<!DOCTYPE HTML><html><head> <title> JavaScript | Add new attribute to JSON object. </title></head><body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var myObj = { 'prop_1': { 'prop_12': 'value_12' } }; el_up.innerHTML = JSON.stringify(myObj); function gfg_Run() { var key = "prop_11"; myObj.prop_1[key] = "value_11"; el_down.innerHTML = JSON.stringify(myObj); } </script></body></html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example adds a prop_11 attribute to the myObj with value value_11.
html
<!DOCTYPE HTML><html><head> <title> JavaScript | Add new attribute to JSON object. </title></head><body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var myObj = { 'prop_1': { 'prop_12': 'value_12' } }; el_up.innerHTML = JSON.stringify(myObj); function gfg_Run() { myObj.prop_1["prop_11"] = "value_11"; el_down.innerHTML = JSON.stringify(myObj); } </script></body></html> |
Output:
- Before clicking on the button:
- After clicking on the button:
