From time to time we need to manipulate JSON data by adding new elements into it. A JSON object is typically more difficult to directly edit as its normally in a string format. So, how can you add an array element into a JSON Object in JavaScript? This is done by using the JavaScript native methods .parse()and
.stringify() We want to do this following: Let’s take the following JSON string data as
an example: We have a list of notorious GTA characters in our JSON. Let’s say we want to add one more character: First, we need to parse our original JSON data Then we want to add our new character into the parsed object: With the new character added, our JSON object now looks like this: Finally, we want to flip the data variable back into its original stringified JSON format: And there you have it. Remember, that JSON
is just a different type of notation so its always available to be transformed back into a proper JavaScript object for data manipulation.
View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
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.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript |
Add a key/value pair to JSON object
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green;">
GeeksForGeeks
</h2>
<p id="GFG_up"
style=" font-weight: bold">
</p>
<button title="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:
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;">
<h2 style="color:green;">
GeeksForGeeks
</h2>
<p id="GFG_up"
style=" font-weight: bold">
</p>
<button title="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: