Updated April 19, 2023
Introduction to jQuery Merge
The jQuery merge() function is used to merge the elements of two arrays into the first array.The jQuery merge() function is a built-in function in jQuery. This function changes the numeric index and length property of the first array by appending the elements from the second array to the first array. The orders of the elements in the array are preserved. As the merge() function is destructive it changes the first original array, if in the future we need the first original array then create the copy of the array before calling the merge() function.
Syntax:
jQuery.merge(firstArr, secondArr);Parameters:
- firstArr: This is not an optional parameter. It specifies the first array which is used to merge or append the elements of the second array.
- secondArr: This is not an optional parameter. It specifies the second array which is used to merge into the first array.
Return Value:
The return value of this function is the merged array or first array after modify.
Working of jQuery merge() Function
The JQuery merge() function accepts two parameters, the first parameter as the first array and the second parameter as the second array. Suppose we have a list of numbers as “number1 = [ 20, 64, 60, 45 ]” and “number2 = [ 10, 20, 30 ]” now we need to merge. So we can use the array merge() function as “$.merge(number1, number2 )”, which modify the number1 and number1 will be “[ 20, 64, 60, 45, 10, 20, 30].
Examples of the jQuery merge() Function
Following are examples are given below:
Example #1
Example of jQuery merge() function to merge the fruits of a given array –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array merge() function </title>
</head>
<body>
<h3> An example for array merge() function : </h3>
<button onclick = "checkRes()" style = "background-color : yellow" > Click here to add more fruits. </button>
<p id = "p1" style = "color : green"></p>
<p id = "p2" style = "color : green"></p>
<p id = "p3" style = "color : red"></p>
<p id = "p4" style = "color : green"></p>
<script>
var fruits = [ "Orange", "Banana", "Apple", "Cherry", "Plums" ];
var more = [ "Blackberry", "Apricot" ]
function checkRes()
{
$( "#p1" ).text("The fruits of the first array before merge() function is : " + fruits);
$( "#p2" ).text("The fruits of the second array before merge() function is : " + more);
$.merge( fruits, more);
$( "#p3" ).text("The fruits of the first array after merge() function is : " + fruits);
$( "#p4" ).text("The fruits of the second array after merge() function is : " + more);
}
</script>
</body>
</html>Output:
Once we click on the button, the output is –
Explanation: In the above code, the two arrays are created which contain some names of the fruits. Next, the array merge() function is used to merge the more fruits array into the fruits as “$.merge( fruits, more);”. The first array which is modified by the merge() function will be displayed once we click on the button, as we can see in the output.
Example #2
Example of jQuery array merge() function to merge multiple arrays –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array merge() function </title>
<style>
#p1 {
color: blue;
}
#p2 {
color: green;
}
</style>
</head>
<body>
<h3> This is an Example for array merge() function : </h3>
<button onclick = "checkRes()" > Click here to get all merge marks. </button>
<p id = "p1"></p>
<p id = "p2"></p>
<script>
var Computer = [ 50, 78, 40, 89 ];
var Math = [ 54, 84, 53, 78 ];
var English = [ 89, 83, 76, 69 ];
var Hindi = [ 87, 78, 70, 59 ];
function checkRes()
{
$( "#p1" ).text("The marks of an given arrays are : English : "+ English+" Hindi : "+ Hindi+"Computer : " + Computer+" Math : "+ Math );
$.merge(English, $.merge(Hindi, $.merge(Computer, Math)));
$( "#p2" ).text("The marks are merge in the above order : " + English);
}
</script>
</body>
</html>Output:
Once we click on the button, the output is –
Explanation: In the above code, the arrays of marks are created for the subjects Computer, Maths, English, and Hindi. Next in the checkRes() function, the merge() function is used to merge all the subjects marks array by using merge() function as “$.merge(English, $.merge(Hindi, $.merge(Computer, Math)));”, so here first Math array appends to computer array, then modify Computer array append Hindi array and then modify Hindi array append to the English array. The order of merge we can see in the output as well.
Example #3
Example of jQuery merge() function to merge the object –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array merge() function </title>
</head>
<body>
<h3> The example for array merge() function : </h3>
<p id = "p1" ></p>
<p id = "p2" ></p>
<button onclick = "checkRes()" style = "background-color : green" > Click here to get merged object. </button>
<script>
varobj = [ { sid: 3, Name: "JavaScript" },
{ sid: 2, Name: "CSS" }]
var obj2 = [{ sid: 4, Name: "jQuery" },
{ sid: 1, Name: "Java" } ];
$( "#p1" ).text("The object1 : " + JSON.stringify(obj));
$( "#p2" ).text("The object2 : " + JSON.stringify(obj2));
function checkRes()
{
$.merge(obj, obj2);
alert("The merge of object1 and object2 is : " + JSON.stringify(obj));
}
</script>
</body>
</html>Output:
Once we click on the button, the output is –
Explanation: In the above code, the two objects are created which contain some subject id and name as key-value pair respectively. Next, the merge() function is used to merge both of the object into first object as “$.merge(obj, obj2); ”. As we can see in the output, the objects are merged.
Recommended Articles
This is a guide to jQuery Merge. Here we also discuss the introduction and working of the jquery merge() function along with different examples and its code implementation. You may also have a look at the following articles to learn more –
