Combine Array in JQuery with example


         Combining two arrays entries is pretty easily doable using JQuery. This tutorial explains this concept with a simple example. Example project can be downloaded from below.

The method that we use to combine array elements in JQuery is $.merge ()

Syntax:  $.merge (array1, array2)
          The $.merge () method combines the array1 and array2 in the order of array1 first and array2 next, and returns an array with the combined entries.

Implementation:
          Let us consider a scenario where you have to merge two different collections of student’s names and have to show the results on click of a button.

Step 1: 
         Download JQuery Library and copy the files to one of your project folders and also create a java script file in the same folder. Add a Web Form to the website and name it as Home.aspx. Add the references of above added files to the home.aspx as shown below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/Scripts.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Note: If you are not sure about the above step please refer to Using JQuery in C# article.

Step 2: 
         Now create 3 div tags with ids’, one for showing the arrayOne, the second one is for showing arrayTwo, and the third one is for showing the combined array and a button with OnclientClick event as below.
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/Scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="arrayOne">    
    </div>

    <div id="arrayTwo">    
    </div>

    <div id="result">    
    </div>
      <asp:Button ID="btnclick" runat="server" Text="Click" OnClientClick="combineArrays();return        false;" />
    </form>
</body>
</html>

Step 3: 
           Now open up the JavaScript file and start writing the code as below.

var arrayOne = ["Akhil", "Anthony", "Bob", "Bhavani", "Cherry"];
var arrayTwo = ["Akhil", "Anthony", "Bob", "Bhavani", "Cherry","Ecllipse","Ford"];

$(document).ready(function () {
    $("#arrayOne").append('<ul>FirstArray</ul>');
    $("#arrayOne").append('<ul>--------------------------------</ul>');

    /*binding the arrayOne student names to div:arrayOne*/
    $.each(arrayOne, function (index, item) {
        $("#arrayOne").append('<li>' + item + '</li>');
    });

    $("#arrayTwo").append('<ul>-------------------</ul>');
    $("#arrayTwo").append('<ul>SecondArray</ul>');
    $("#arrayTwo").append('<ul>--------------------------------</ul>');

    /*binding the arrayTwo student names to div:arrayTwo*/
    $.each(arrayTwo, function (index, item) {
        $("#arrayTwo").append('<li>' + item + '</li>');
    });
    $("#arrayTwo").append('<ul>-------------------</ul>');
});

function combineArrays() {
    $("#result").append('<ul>CombinedArray</ul>');
    $("#result").append('<ul>--------------------------------<ul>');

    /*Combining arrayOne,arrayTwo*/
    var students = $.merge(arrayOne, arrayTwo);

    /*binding the  students  names to div:results*/
    $.each(students, function (index, item) {
        $("#result").append('<li>' + item + '</li>');
    });
}

In the above code we are defining two global arrays (arrayOne,arrayTwo). These are made global because they could be accessible from anywhere in the script file.
In the $(document).ready () function we are running an each loop over each array and binding each item to the corresponding div tags.

Now our aim is to combine student names and bind them to the div with id “result” on click of “click” button.
So if you observe the definition of combineArrays () method,

    /*Combining arrayOne,arrayTwo*/
    var students = $.merge(arrayOne, arrayTwo);

We are merging arrayOne and arrayTwo using $.merge function and binding the resulted array to the result div.
So when run the project and click on the button, you will get the following output.


Hope this tutorial with example helps you to understand, how to combine array elements using Jquery..

Source Code of this application - Link




Reactions:

0 comments :

Post a Comment