Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads