How to Add an Element to a JSON Object using JavaScript?

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.

let jsonObject = { key1: 'value1', key2: 'value2' };

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: 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.

let jsonObject = {  key1: 'value1',  key2: 'value2' }; jsonObject.newKey = 'newValue'; console.log(jsonObject); 

{ key1: 'value1', key2: 'value2', newKey: 'newValue' } 

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: 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.

let jsonObject = {  key1: 'value1',  key2: 'value2' }; jsonObject['newKey'] = 'newValue'; console.log(jsonObject); 

{ key1: 'value1', key2: 'value2', newKey: 'newValue' } 

Using Object.assign()

Utilizes the Object.assign() method to merge the original object with a new object containing the additional key-value pair.

Example: 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.

let jsonObject = {  key1: 'value1',  key2: 'value2' }; jsonObject = Object.assign({}, jsonObject, { newKey: 'newValue' }); console.log(jsonObject); 

{ key1: 'value1', key2: 'value2', newKey: 'newValue' } 

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: 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.

let jsonObject = {  key1: 'value1',  key2: 'value2' }; jsonObject = { ...jsonObject, newKey: 'newValue' }; console.log(jsonObject); 

{ key1: 'value1', key2: 'value2', newKey: 'newValue' }