Add New Key To Json Object Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

37

Share

How to Add a New Key to a JSON Object in JavaScript

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is widely used in web development. One common task is to add new keys to existing JSON objects. This article will guide you through different methods to achieve this.

Method 1: Using Bracket Notation

This is the most straightforward method for adding a new key-value pair to a JSON object.

Code:

let myObject = { name: "John", age: 30 };

// Add a new key 'city' with value 'New York'
myObject['city'] = 'New York'; 

console.log(myObject); // Output: { name: "John", age: 30, city: "New York" }

Explanation:

1. We use the bracket notation myObject['city'] to access the desired key.
2. We assign the new value 'New York' to the key 'city'.

Method 2: Using Dot Notation

Similar to the bracket notation, we can also use dot notation to add new keys.

Code:

let myObject = { name: "John", age: 30 };

// Add a new key 'occupation' with value 'Software Engineer'
myObject.occupation = 'Software Engineer';

console.log(myObject); // Output: { name: "John", age: 30, occupation: "Software Engineer" } 

Explanation:

1. We use the dot notation myObject.occupation to access the key occupation.
2. We assign the new value 'Software Engineer' to the key occupation.

Note: You can only use dot notation when the key is a valid JavaScript identifier (no spaces, special characters, or reserved keywords).

Method 3: Using Object.assign()

Object.assign() method allows us to merge two objects into one.

Code:

let myObject = { name: "John", age: 30 };

// Create a new object with the new key-value pair
let newKey = { city: 'New York' };

// Use Object.assign() to merge the objects
myObject = Object.assign(myObject, newKey);

console.log(myObject); // Output: { name: "John", age: 30, city: "New York" } 

Explanation:

1. We create a new object newKey with the key-value pair we want to add.
2. We use Object.assign() to merge the original object myObject with newKey. The resulting object will contain all the keys from both objects.

Method 4: Using Object.defineProperty()

This method allows you to define properties on an object.

Code:

let myObject = { name: "John", age: 30 };

// Add a new key 'address' with value '123 Main Street'
Object.defineProperty(myObject, 'address', {
  value: '123 Main Street',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(myObject); // Output: { name: "John", age: 30, address: "123 Main Street" }

Explanation:

1. We use Object.defineProperty() to define the new property 'address'.
2. We specify the value, writability, enumerability, and configurability of the property.

Conclusion

Adding new keys to a JSON object in JavaScript is a common task. Using any of the methods described above, you can effectively modify your JSON objects to add new data as needed.