How to add an element to a JSON object using JavaScript ?
Last Updated :
11 Mar, 2024
In JavaScript to add an element to a JSON object by simply assigning a value to a new key. We can use the approaches mentioned below.
Let’s first create a JSON object in JavaScript and then implement the possible approaches.
Javascript
let jsonObject = {
key1: 'value1' ,
key2: 'value2'
};
|
Examples to add an element to a JSON object using JavaScript
1. Using Dot Notation to add an element to a JSON object
Uses the dot notation (object.property
) to directly assign a new property to the JSON object.
Example: Below is an Example using dot Notation.
Javascript
let jsonObject = {
key1: 'value1' ,
key2: 'value2'
};
jsonObject.newKey = 'newValue' ;
console.log(jsonObject);
|
Output
{ key1: 'value1', key2: 'value2', newKey: 'newValue' }
Explanation: This code initializes a JSON object `jsonObject` with two key-value pairs. It then adds a new key `newKey` with the value `’newValue’` using dot notation. Finally, it logs the updated `jsonObject` to the console.
2. Using Bracket notation to add an element to a JSON object
Uses the bracket notation (object['property']
) to add a new property to the JSON object.
Example: Below is an Example using Bracket notation.
Javascript
let jsonObject = {
key1: 'value1' ,
key2: 'value2'
};
jsonObject[ 'newKey' ] = 'newValue' ;
console.log(jsonObject);
|
Output
{ key1: 'value1', key2: 'value2', newKey: 'newValue' }
Explanation: This code initializes a JSON object `jsonObject` with two key-value pairs. It then adds a new key `newKey` with the value `’newValue’` using bracket notation. Finally, it logs the updated `jsonObject` to the console.
3. Using Object.assign()
Utilizes the Object.assign()
method to merge the original object with a new object containing the additional key-value pair.
Example: Below is an Example using Object.assign().
Javascript
let jsonObject = {
key1: 'value1' ,
key2: 'value2'
};
jsonObject = Object.assign({}, jsonObject, { newKey: 'newValue' });
console.log(jsonObject);
|
Output
{ key1: 'value1', key2: 'value2', newKey: 'newValue' }
Explanation: This code initializes a JSON object `jsonObject` with two key-value pairs. It then creates a new object by merging `jsonObject` with an object containing the additional property `{ newKey: ‘newValue’ }` using `Object.assign()`. Finally, it logs the updated `jsonObject` to the console.
4. Using Spread operator to add an element to a JSON object
Uses the spread operator (...
) to create a new object by spreading the properties of the original object and adding the new property.
Example: Below is an Example using Spread operator.
Javascript
let jsonObject = {
key1: 'value1' ,
key2: 'value2'
};
jsonObject = { ...jsonObject, newKey: 'newValue' };
console.log(jsonObject);
|
Output
{ key1: 'value1', key2: 'value2', newKey: 'newValue' }
Explanation: This code initializes a JSON object `jsonObject` with two key-value pairs. It then creates a new object by spreading the properties of `jsonObject` and adding the property `newKey` with the value `’newValue’`. Finally, it logs the updated `jsonObject` to the console.
Share your thoughts in the comments
Please Login to comment...