Updated April 19, 2023
Introduction to jQuery array filter
The jQuery array filter() function is used to create a new array by filtering the given array elements that pass the filter function. It is a built-in function in jQuery. This function fills all the elements from the array by static value from start to end index. This function does not run the test function for elements of an array that are without values. This function does not change an original array.
Syntax:
array.filter( function( currentValue, index, array ), thisValue);Parameters:
- function(currentvalue, index, array): This is not an optional parameter. It specifies the function that is executed as a filter function on array elements, it processes each element of an array. The function takes three arguments as currentValue, index, and array. The currentValue is not an optional parameter, it specifies the current value of an element. The index is an optional parameter, it specifies the current index of an element. The array is an optional parameter, it specifies the current element that belongs to this array.
- thisValue: This is an optional parameter that specifies the value to be used as this value by passing to the function. If thisValue is not passed, then “undefined” will be passed as of this value.
Return Value:
The return value of this function is an array that has elements from the given array which pass the test function.
Working of jQuery array filter() Function
- The jQuery array filter() function accepts two parameters as the first parameter test function and second this value.
- Suppose we have a list of even numbers as “no = [ 50, 20, 64, 89 ]”, now we need to filter out the even numbers.
- So we can use the array filter() function as “no.filter(even )”, where even is the name of the function which checks whether the number is even or not.
- The new return array will be [50, 20, 64].
Examples of jQuery array filter
Given below are the examples mentioned:
Example #1
Example of jQuery array filter() function to filter out the passing marks from 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 filter( ) function </title>
<style>
p {
color: blue;
}
div {
color: green;
}
</style>
</head>
<body>
<h3> The Example for array filter() function : </h3>
<button onclick = "checkRes()" > Click here to get passing marks. </button>
<p id = "p1"> </p>
<div id = "p2"> </div>
<script>
var marks = [ 50, 78, 40, 89 ];
function getMarks( marks )
{
return ( marks >= 50 );
}
function checkRes()
{
var res = marks.filter( getMarks );
$( "#p1" ).text("The marks of an given array before filter() function is : " + marks);
$( "#p2" ).text("The marks of a new array after filter() function is : " + res);
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code the array is created which contain marks of the students. Next the filter() function is used to create a new array by filter the passing marks( marks >= 50) of an array which is perform by calling the getMarks() function by the filter() function.
Example #2
Example of jQuery array filter() function to filter out the name of fruits whose length is greater than or equal to six from the 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 filter( ) function </title>
</head>
<body>
<h3> The Example for array filter() function : </h3>
<button onclick = "checkRes()" > Click here to get fruits of length >= 6. </button>
<script>
var fruits = [ "Apple", "Orange", "Banana", "Cherry", "Plums" ];
function checkRes()
{
var res = fruits.filter( fruits => fruits.length >= 6 );
alert( "The marks of an given array before filter() function is : " + fruits + "\n The marks of a new array after filter() function is : " + res);
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code the array is created which contain some name of the fruits. Next, the array filter() function is used to filter out the name of the fruits whose length is greater than or equal to six from the array as “fruits.filter( fruits => fruits.length >= 6 ); “ and which will be displayed once we click on the button, as we can see in the output.
Example #3
Example of jQuery array filter() function to filter out the even numbers present at the even index from the 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 filter( ) function </title>
</head>
<body>
<script>
var array = [ 20, 12, 65, 45, 44, 87, 90 ];
function even(element, index, array) {
return ( element%2 == 0 && index%2 == 0 );
}
function fun()
{
res = array.filter( even )
$( "#d1").html("The elements of an array before grep() function is : " + array );
$( "#d2").html("The elements of an array after grep() function is : " + res);
}
</script>
</head>
<body>
<h3> The Example for array filter() function : </h3>
<button onclick = "fun()" id = "test" > Apply filter() function </button>
<br>
<div id = "d1"> </div>
<div id = "d2"> </div>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the array is created which contains some numbers. Next, the filter() function is used with element and index to create a new array by filtering the even numbers present at an even index from the array and which will be displayed once we click on the button, as we can see in the output.
Conclusion
The jQuery array filter() function is a built-in function, which is used to creates a new array by filtering the given array elements that pass the filter function.
Recommended Articles
This is a guide to jQuery array filter. Here we discuss the introduction, working of jQuery array filter() function and examples respectively. You may also have a look at the following articles to learn more –
