jquery array – Sibeesh Passion

Merge Multiple Arrays To One

SibeeshVenu — Tue, 18 Aug 2015 12:06:45 +0000

In this post we will discuss how we can merge multiple arrays to one array using JQuery. There are so many ways to achieve this. Like we can loop through each array and push it to other array one by one or we can join those arrays one by one. Or we can use JQuery function merge() . But requirement was bit different. Since I was using large data, I was not able to use any loop or any long processes. We will discuss an easy way here in this article. I hope you will like this.

Background

Recently I got a requirement of merging large collections of client side arrays to one array. The problem was the arrays were dynamic, hence I was not sure about the count of those arrays, it may be different in different times. So what to do? A loop, merge, push, join in jquery was not a perfect solution for me since the data was large. So I found the solution in other way.

Using the code

Consider we have some arrays as follows.

[js]
[21,2], [35,4], [25,6],[11,6],[44,67]
[/js]

Now we need to change these arrays to a variable.

[js]
var myArrays = [[21,2], [35,4], [25,6],[11,6],[44,67]];
[/js]

Now here comes the real part.

[js]
var myArray = [].concat.apply([], myArrays);
[/js]

We are using jquery concat and jquery apply() function.

Now we will write this array to console.

[js]
console.log(myArray);
[/js]

See the console, you can get the values as follows.

Merge Multiple Arrays To One

You can see the demo at jsfiddle here: Merge Multiple Arrays To One

Conclusion

I hope someone found it useful. Please share me your valuable suggestions and feedback. Thanks in advance.

Kindest Regards
Sibeesh Venu

Remove An Array Element By Index

SibeeshVenu — Fri, 07 Aug 2015 00:30:03 +0000

In this article, we will see how we can remove an array element by index. We all work with client side array right? What will you do if you need to remove an array element?It will be easy for you to do, if you know the index of the element which we need to delete from the array. Here we are going to discuss that. We will give an option to select the index, and will take that value, and then we will delete the array. Simple right?I hope you will like this article.

Using the code

Create some elements

[html]

[/html]

Add CSS

[css]

[/css]

Add the scripts

[js]

[/js]

In the above code you can find out a function removeArrayElementByIndex which accepts our array and the index as arguments.

[js]
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
$(‘#divRemoveAndShow’).html(‘Removed from Array and JSON string is ‘).append(JSON.stringify(myArray)).show();
myJSON = myArray
}
[/js]

When you click on the button loadAndShow , we will load the array and shows the contents.

[js]
//This is the data we load
[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]
[/js]

And if you click on the button RemoveAndShow we will delete the array by passing the array and index to the function removeArrayElementByIndex

Complete code

[html]

Remove an array element by its index

[/html]

Output

Remove an array element by its index

Conclusion

I hope someone found it is useful. Please share me your feedback. Thanks in advance.

Kindest Regards
Sibeesh Venu

Find And Exclude Element From Array

SibeeshVenu — Wed, 05 Aug 2015 00:50:47 +0000

In this post we well discuss about finding and excluding element from JQuery Array. We all worked in a JQuery. Sometimes we works in JQuery Arrays too. Right? Consider we have an array, and in that array we need to exclude a particular element and create a new array without excluded element. What we will do? We will use a for loop and just loop through the array,apply some conditions and if a criteria matches, we will do some operation right? Here I am going to share you an another way that we can achieve this by using a function called grep in JQuery. Normally grep function act as each in JQuery.

Backgroud

I am working in a client side application where there are lots of client side arrays and variables. We handle our entire client side processes by using JQuery. I usually go through the operation of finding and removing array elements using JQuery. I thought it would be better if I share some knowledge about that here. I hope someone will find it is useful.

Using the code

To start with you need to include jquery reference.

[js]

[/js]

Now we need an array right? Consider following is our array.

[js]
var myArray = [‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’]
[/js]

Next, we will formulate this array to a HTML table, so that the visualization will be perfect. To do this we will have a function, which will just convert the array element to HTML table. Following is our function body.

[js]
function buildTable(array,message){
var html='

’;
for(var i=0;i {
html+='’;
}
html+='

’+message+'
’+array[i]+'

’;
$("#body").html(html);
}
[/js]

As you can see, the parameters for this functions are, an array and a caption message.
Now we need to call this unction right?

[js]
var myArray = [‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’]
var message="My Array Elements Before Removing";
buildTable(myArray,message);
[/js]

Style out HTML table by giving the preceding styles.

[css]

[/css]

So our output will be as follows.

Now we need to fire a click event in which we will find out which element is to be excluded from the array, and finally assign new element set to our existing array.

[html]
Click To Remove
[/html]

[js]
$("#click").click(function(){
var message="My Array Elements After Removing";
var excludedElement = [‘Thursday’];
myArray = jQuery.grep(myArray, function(value) {
return value != excludedElement;
});
buildTable(myArray,message);
});
[/js]

Here we are finding the element ‘Thursday’ which we saved to a variable as follows.

[js]
var excludedElement = [‘Thursday’];
[/js]

Now our real here is jQuery.grep , which returns our new array with filtered data.

[js]
return value != excludedElement;
[/js]

And then we are calling our buildTable function to formulate our new array to a HTML table. Once we call it we will get an output as follows.

Complete Code

[html]

Remove Elements From An Array using JQuery- Sibeesh Passion

Click To Remove

[/html]

Demo

Please find out the demo in jsfiddle here: Exclude or remove elements

Conclusion

I hope you liked this article. Please share me your feedback. It is always welcomed. Thanks in advance.

Kindest Regards
Sibeesh Venu