JavaScript merge JSON objects

In this tutorial we will learn how to merge two JSON objects using JavaScript.

Introduction

In this tutorial we will learn how to merge two JSON objects using JavaScript.

We will assume that we are starting from two JSON strings and, at the end, we want to obtain a single JSON string with the merged objects. Nonetheless, we will do the merging operation over the parsed objects, on their JavaScript representation.

Note however that the merging operation is useful outside the scope of JSON processing. It might also be useful for some JavaScript applications where we simply want to merge two JavaScript objects, without actually doing any deserialization / serialization of JSON strings.

Take also in consideration that there are a lot of approaches that can be taken in JavaScript to merge JSON objects: using a loop to iterate over the keys of the objects and assign them to a destination object, using the assign method, using a library, etc..

In our example, we will use the spread syntax to merge the objects.

For our tutorial, we will do some simplifications to our merging operation:

• There won’t be properties with the same name in both JSONs;
• There won’t by any deep merge between nested objects;
• There won’t be any deep copy of the object properties.

Naturally, depending on the necessities of each application, the code below might need to be adapted. The objective of this tutorial is to show a simple approach to the merging problem, which might be adapted for each specific need.

The code

We will start our code by defining two JSON strings containing two different objects. These are the objects we will merge.

Both JSON objects will be very simple, representing possible information about a person. One of them contains two properties: name and age. The other also contains two properties: an array of languages the person speaks and a Boolean indicating if the person is married or not.

const string1  = `{
  "name": "Todd",
  "age": 20    
}`;

const string2 = `{
  "languages": ["Spanish", "Portuguese"],
  "married": true
}`;

After defining these JSON strings, we will parse them to JavaScript objects. We will do the merging operation over these objects and then convert the result back to a JSON string. For a more detailed tutorial on how to parse JSON strings to JavaScript objects, please check here.

const obj1 = JSON.parse(string1);
const obj2 = JSON.parse(string2);

Then we will take care of the actual merging of the JSON objects. So, we will start by defining a new object with brackets. Then, we will use the spread operator “…” to copy the properties of each original object to the new one.

We are using this syntax to merge two objects, but we could merge more objects in the same assignment operation.

const mergedObject = {
  ...obj1,
  ...obj2
};

Note that we will be doing a shallow copy, so you should be careful to not end up mutating the properties of the original objects, in case they are references to nested objects. You can read here an article explaining the difference between a shallow copy and a deep copy, and the implications of both.

Additionally, we should consider that if we had the same property name in both original objects, the value of the property of the last object being spreaded would be the one kept in the merged object.

After this, we will convert the merged object back to a JSON string with a call to the stringify method on the JSON object. You can check here a more detailed tutorial on how to serialize a JavaScript object to JSON.

We will then print the result directly to the console.

console.log(JSON.stringify(mergedObject))

The complete code can be seen below.

const string1  = `{
  "name": "Todd",
  "age": 20    
}`;

const string2 = `{
  "languages": ["Spanish", "Portuguese"],
  "married": true
}`;

const obj1 = JSON.parse(string1);
const obj2 = JSON.parse(string2);

const mergedObject = {
  ...obj1,
  ...obj2
};

console.log(JSON.stringify(mergedObject))

Testing the code

To test the code, simply run it in a tool of your choice. Make sure it has support for the spread syntax. In my case, I’ll be using Visual Studio Code with the Code Runner extension.

As output, you should get a result similar to figure 1.