Multiple Methods and Practices for Merging JSON Objects in JavaScript

Introduction

In modern web development, JSON (JavaScript Object Notation) is widely used as a lightweight data interchange format for data transmission and storage between front-end and back-end systems. In practice, it is often necessary to merge multiple JSON objects into one to meet data processing or API interaction requirements. Based on high-scoring answers from Stack Overflow and community discussions, this article systematically reviews multiple methods for merging JSON objects in JavaScript, providing detailed code examples to explain their implementation principles and applicable scenarios.

Basic Concepts of JSON Object Merging

JSON object merging typically involves two cases: concatenation of array-type JSON objects and merging of object-type JSON properties. Array-type JSON objects refer to arrays containing multiple objects with similar structures, while object-type JSON refers to single objects with key-value pair structures. The goal of merging is to integrate data from two or more JSON objects into one, avoiding data redundancy and simplifying subsequent processing.

Concatenation Methods for Array-Type JSON Objects

When the JSON objects to be merged have the same structure and exist as arrays, JavaScript's array concat method can be used for concatenation. This method is straightforward and suitable for scenarios where all elements need to be retained and order is important.

var jsonArray1 = [{'name': "doug", 'id':5}, {'name': "dofug", 'id':23}];
var jsonArray2 = [{'name': "goud", 'id':1}, {'name': "doaaug", 'id':52}];
jsonArray1 = jsonArray1.concat(jsonArray2);
// Result: jsonArray1 = [{'name': "doug", 'id':5}, {'name': "dofug", 'id':23}, {'name': "goud", 'id':1}, {'name': "doaaug", 'id':52}];

The concat method does not modify the original array but returns a new array containing all elements from the merged arrays. This makes it useful in functional programming to avoid side effects.

Merging Methods for Object-Type JSON Properties

For object-type JSON, merging typically involves copying or overwriting properties. Here are several common implementation methods:

Using the Object.assign Method

Object.assign is a method introduced in ES6 that copies the enumerable properties of one or more source objects to a target object. If multiple source objects have the same property, the later source object overwrites the earlier one.

let x = { a: 1, b: 2, c: 3 };
let y = { c: 4, d: 5, e: 6 };
let z = Object.assign(x, y);
console.log(z); // Output: { a:1, b:2, c:4, d:5, e:6 }

Note that Object.assign modifies the target object. To preserve the original objects, pass an empty object as the target: Object.assign({}, x, y).

Using the Spread Operator

ES2018 introduced the object spread operator, providing a more concise way to merge objects:

let obj = { ...sourceObj1, ...sourceObj2 };

The spread operator creates a new object containing all properties from the source objects, with properties from later sources overwriting earlier ones. This method offers better code readability compared to Object.assign.

Custom Merging Function

In some cases, finer control over the merging process may be needed, which can be achieved by writing a custom function:

var json1 = { value1: '1', value2: '2' };
var json2 = { value2: '4', value3: '3' };

function jsonConcat(o1, o2) {
 for (var key in o2) {
  o1[key] = o2[key];
 }
 return o1;
}

var output = {};
output = jsonConcat(output, json1);
output = jsonConcat(output, json2);
// Output: { value1: '1', value2: '4', value3: '3' }

Custom functions allow developers to implement specific merging logic, such as conditional merging or deep merging.

Using jQuery's extend Method

If the project already uses the jQuery library, its $.extend method can be utilized for object merging:

o1 = {"foo":"bar", "data":{"id":"1"}};
o2 = {"x":"y"};
sum = $.extend(o1, o2);
// Result: sum = {"foo":"bar", "data":{"id":"1"}, "x":"y"}

$.extend supports deep merging by passing true as the first parameter: $.extend(true, o1, o2).

Method Comparison and Selection Recommendations

Different merging methods have their own advantages and disadvantages. Consider the following factors when choosing:

• Performance: For large-scale data, concat and the spread operator generally perform better.
• Browser Compatibility: Object.assign and the spread operator require modern browser support, while custom functions and jQuery methods have better compatibility.
• Code Simplicity: The spread operator and Object.assign offer more concise and maintainable code.
• Functional Requirements: For deep merging or special handling, custom functions or jQuery's $.extend are more suitable.

In actual projects, it is recommended to prioritize native JavaScript methods, such as concat for array merging and Object.assign or the spread operator for object merging, to reduce external dependencies.

Practical Application Scenarios

As mentioned in the reference article, merging JSON objects is a common requirement in scenarios like API data uploads. For example, when constructing a request body, it may be necessary to merge user input data with system default configurations:

const userData = { name: "John", age: 30 };
const defaultConfig = { language: "en", theme: "dark" };
const requestBody = { ...defaultConfig, ...userData };
// Result: { language: "en", theme: "dark", name: "John", age: 30 }

This pattern ensures that user data takes precedence while filling in missing default values.

Conclusion

JavaScript provides multiple flexible methods for merging JSON objects, allowing developers to choose the most appropriate solution based on specific needs. Array concatenation is suitable for array data with similar structures, while object merging methods are ideal for integrating properties of key-value pair objects. In practice, understanding the principles and applicable scenarios of various methods helps in writing more efficient and maintainable code. As the JavaScript language continues to evolve, new features like the spread operator are making object merging more concise and intuitive.