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 attibute to the myObj object via var key.
<!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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: This example adds a prop_11 attibute to the myObj with value value_11.
<!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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- Deserializing a JSON into a JavaScript object
- JavaScript | How to add an element to a JSON object?
- JavaScript | Remove a JSON attribute
- Converting JSON text to JavaScript Object
- How to send a JSON object to a server using Javascript?
- How to Convert JS Object to JSON String in JQuery/Javascript?
- JavaScript | Check if a key exists inside a JSON object
- JSON | modify an array value of a JSON object
- Convert Json String to Java Object Using GSON
- Convert Java Object to Json String using Jackson API
- Python | Ways to convert string to json object
- Convert Java Object to Json String using GSON
- Javascript | JSON PHP
- JavaScript JSON
- JavaScript | JSON HTML
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.