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

In this article, you will understand how to add an element to a JSON object using JavaScript.

JSON objects are key-value pairs separated by colons and surrounded by curly braces {}. JavaScript provides two main ways to add new properties: bracket notation and dot notation.

Using Bracket Notation

Bracket notation is useful when property names contain special characters or are stored in variables.

var jsonObject = {
   members: 
   {
      host: "hostName",
      viewers: 
      {
         userName1: "userData1",
         userName2: "userData2"
      }
   }
};

console.log("Original JSON object:");
console.log(jsonObject);

console.log("\nAdding an element using bracket notation:");
jsonObject.members.viewers['userName3'] = 'userData3';

console.log("\nJSON object after adding property:");
console.log(jsonObject);

Original JSON object:
{
  members: {
    host: 'hostName',
    viewers: { userName1: 'userData1', userName2: 'userData2' }
  }
}

Adding an element using bracket notation:

JSON object after adding property:
{
  members: {
    host: 'hostName',
    viewers: {
      userName1: 'userData1',
      userName2: 'userData2',
      userName3: 'userData3'
    }
  }
}

Using Dot Notation

Dot notation is cleaner and more readable when property names are valid JavaScript identifiers.

var jsonObject = {
   members: 
   {
      host: "hostName",
      viewers: 
      {
         userName1: "userData1",
         userName2: "userData2"
      }
   }
};

console.log("Original JSON object:");
console.log(jsonObject);

console.log("\nAdding an element using dot notation:");
jsonObject.members.viewers.userName4 = 'userData4';

console.log("\nJSON object after adding property:");
console.log(jsonObject);

Original JSON object:
{
  members: {
    host: 'hostName',
    viewers: { userName1: 'userData1', userName2: 'userData2' }
  }
}

Adding an element using dot notation:

JSON object after adding property:
{
  members: {
    host: 'hostName',
    viewers: {
      userName1: 'userData1',
      userName2: 'userData2',
      userName4: 'userData4'
    }
  }
}

Adding Multiple Properties

You can also use Object.assign() to add multiple properties at once:

var jsonObject = {
   members: {
      host: "hostName",
      viewers: {
         userName1: "userData1"
      }
   }
};

console.log("Original object:");
console.log(jsonObject);

// Add multiple properties
Object.assign(jsonObject.members.viewers, {
   userName2: "userData2",
   userName3: "userData3"
});

console.log("\nAfter adding multiple properties:");
console.log(jsonObject);

Original object:
{ members: { host: 'hostName', viewers: { userName1: 'userData1' } } }

After adding multiple properties:
{
  members: {
    host: 'hostName',
    viewers: {
      userName1: 'userData1',
      userName2: 'userData2',
      userName3: 'userData3'
    }
  }
}

Comparison

Conclusion

Use dot notation for simple property addition and bracket notation when dealing with dynamic property names. Object.assign() is efficient for adding multiple properties simultaneously.