Updated April 10, 2023
Introduction to jQuery merge objects
The jQuery merge() is one of the methods it is used to merge or combine the two objects into a new separate object. Most probably the object is of array types. It can be passed as the argument for the method and also both are array-like object types. It fetches and retrieves the operations from the array that contains all the elements from both of the arrays. Order of the arrays will be most preferred with each item that can be appended with each other the length is calculated and the $.merge() is one of the destructive methods in the jQuery libraries.
Syntax:
Merge() is one of the default methods on the jQuery library and it is combined the two different array objects to a single object. It allows the duplicate when we called and used the array values in another area of the script.
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>
var a= ["inputs" ];
var b = ["inputs1" ];
var result = $.merge(a,b);
---some jQuery and javascript codes depends on the user requirement------
</script>
<body>
---some html UI elements depends on the requirement---
</body>
</html>The above codes are the basic syntax for utilizing the merge() method on the script. Here we used array type as initialized on both the variables and we get the output results as an array type.
How to merge objects in jQuery?
In jQuery library merge() is one of the default methods for appending the two array contents on the single variable space. The array datas may be duplicate and it will be initialized on the different indexes but it has the same ranges as the first array as the 3 index ranges, the second array index range also 3 means it can be appended and combined with both the array datas. Sometimes the array values are the same as both the variables that time it accepts the duplicate datas and combined them into the single one. The array values may be supported for both the numeric and non-numeric value ranges. The jQuery DOM objects are possible to select and merge the objects into a single array and call the jQuery methods even though we utilized the jQuery prototypes for extending and merging the two object datas into the single one. These concatenation operations will be done for more than one variable object type also but especially it allocates the array objects into the variable. The object will be assigned using the assign() and extend() method while we used these two methods the assign() method is used to copy the values from all the related objects from more than one source and merge copy to the other target objects.
Example #1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to My Domain it’s a First Example</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color: red">Have a Nice Day Users</h1>
<h3>Thanks for spending the time for our application</h3>
<b>vars = [ "First Input", "Second Input", "c", "d", "e", "Seven Input", "$#@#%^^$^&" ]</b><br>
<b>vars1 = [ "Eight Input", "Ninth Input",1,2,3, "Eleventh Input","&^@$&^@&^*(" ]</b>
<br>
<p>Please try again</p>
<button onclick="demo()">Show Me</button>
<br><br>
<b id="eg"></b>
<script>
function demo() {
var vars = [ "First Input", "Second Input", "c", "d", "e", "Seven Input", "$#@#%^^$^&" ];
var vars1 = [ "Eight Input", "Ninth Input",1,2, 3, "Eleventh Input","&^@$&^@&^*(" ];
var result = $.merge(vars, vars1 );
document.getElementById("eg").innerHTML = "Thanks for working our application your inputs are merged and we have finalised and displayed your results : [" + result + "]";
}
</script>
</body>
</html>Output:
After clicking on the button the output will be:
In the above example, we used two variable values to combine with the single merge and output results.
Example #2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery | merge() method</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color: green">
Welcome to My Domain it’s a second example
</h1>
<h3>Have a Nice Day Users</h3>
<b>eg = [ "siva", "raman", "arun", "kumar", "the merge object is one of the feature in jQuery and it is used to merge or combine the two different objects into the single one" ]</b><br>
<b>eg1 = [ "first", "ft", "g" ]</b> <br>
<b>eg2 = [ 3, 8, 2, 2 ]</b> <br>
<b>eg3 = [ 3, 2, 4 ]</b><br>
<b>eg4 = [ ]</b>
<br>
<p>Show me the merge object results</p>
<button onclick="demo()">Show me</button>
<br><br>
<b id="ex"></b>
<script>
function demo() {
var a = [ "siva", "raman", "arun", "kumar", "the merge object is one of the feature in jQuery and it is used to merge or combine the two different objects into the single one" ];
var b = ["first", "ft", "g" ];
var c = [ 3, 8, 2, 2];
var d = [ 3, 2, 4];
var e = [];
var results = $.merge(
c, $.merge($.merge(e, $.merge(a, b )), d));
document.getElementById(
"ex").innerHTML = "Thank you for spending the time regarding the merged objects from more than one arrays and your net result : [" + results + "]";
}
</script>
</body>
</html>Output:
After clicking on the button the output will be:
In the second example, we used more than one array variable with the merge() option to combine the single array variable.
Example #3
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Domain it’s a Third Examples</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var vars = [8, 2, 2, 0, 2];
var vars1 = [4, 0, 5,6 , "string inputs"];
$("#eg").text("Your first input Array is :" + vars);
$("#eg1").text("Your Second input Array is :" + vars1);
var result = $.merge(vars, vars1);
$("#eg2").text("Your Merged and combine Array is:" + result);
});
});
</script>
<style>
body{font-family:Verdana; color:violet;}
#eg, #eg1, #eg2{background:greeb; color:blue;padding:7px;}
</style>
</head>
<body>
<h3>Thank you users for spending the time in the merge array example </h3>
<div id="eg"></div><br>
<div id="eg1"></div><br>
<div id="eg2"></div><br>
<button>Show Me</button><br>
</body>
</html>Output:
After clicking on the button the output will be:
In the final example, we used both the merge() and extend() methods to combine the two-variable array values with a single array value.
Conclusion
In jQuery merge() method is one of the default methods for combining and merge with the single variable outputs. We used n number of array variables to join with a single array variable it reduces the memory space area and it increases the performance of the web-based application.
Recommended Articles
This is a guide to jQuery merge objects. Here we discuss How to merge objects in jQuery along with the examples and outputs. You may also look at the following article to learn more –
