Introduction to JavaScript Filter List
The filter list in JavaScript means filtering the list items based upon the condition passed to the filter. Filter array plays a crucial role when fetching the data from array-based on names, price, date, special characters, etc. The developer can create their own custom filters. Filters in a list applied after pipe symbol (|) followed by expression as like below.
Advantages
- Populates exact data by discarding unnecessary data.
- Easy to apply in Angular JS.
- Provided by so many predefined filters.
What is JavaScript filter list?
Real-Time Scenario: When we buy a product from the Amazon website, we first search for a product. It populates 1000s of products with different price, brand, offers, size, etc. But as we are a customer, we don’t want all this product then we simply applied a filter on the result set. This kind of application requirement filter list plays a vital role.
Syntax
var outList= list.filter(function());The filter function can be applied to either array or list, and within the filer, we can call another function for any boolean operation.
- list: It is the actual list where the filer() method is applied.
- function(): It is a function for checking any condition on filter() list.
- Return value: Resultant of filter() gives set of value/values with a list.
Note: In JavaScript, the list and array are treated the same as both are automatically dynamic in JavaScript. JavaScript file can be saved with .js extension or we can include within html file by using <script> tag.
Examples of JavaScript Filter List
Different examples are mentioned below:
Example #1 – List filer for checking leap years
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function getLeapYears(year) { //line1
return (((year % 4 == 0) && (year % 100 != 0)) ||
(year % 400 == 0));//line2
}
function myFunction() { //line3
var leapYears = [2010,2017,1400,1600,1800,1700,2000].filter(getLeapYears); //line4
for (var j = 0; j < leapYears.length; j++){//line5
document.write(leapYears[j]+" is a Leap Year <br>"); //line6
}
}
myFunction(); //line7
</script>
</body>
</html>Output:
Explanation:
- Line1 is for getLeapYears() function implementation.
- Line2 is for leap year logic.
- Line3 Main function for filer() list.
- Line4 Filter() for filtering the list elements whether they are leap years or not.
- Line5 List iteration for getting each element separately.
- Line6 displays the leap years.
Example #2 – List filer for checking Negative numbers
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function getNegativeNumbers(number) { //line1
return number<0 //line2
}
function getMyFunction() { //line3
var negativeNumbers = [10,20,30,-1,-5,-15,16,-18,-19].filter(getNegativeNumbers); //line4
for (var j = 0; j < negativeNumbers.length; j++){//line5
document.write(negativeNumbers[j]+" is a Negative Number <br>"); //line6
}
}
getMyFunction(); //line7
</script>
</body>
</html>Output:
Explanation:
- Line1 is for getNegativeNumbers() function implementation.
- Line2 is for negative numbers logic.
- Line3 Main function for filer() list.
- Line4 Filter() for filtering the list elements whether they are negative numbers or not.
- Line5 List iteration for getting each element separately.
- Line6 displays the negative numbers.
Example #3 – List filer for checking Even numbers
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function evenNumbers(number) { //line1
return number%2==0 //line2
}
function mainFunction() { //line3
var evenNumberList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16].filter(evenNumbers); //line4
for (var j = 0; j < evenNumberList.length; j++){//line5
document.write(evenNumberList[j]+" is a Even Number <br>"); //line6
}
}
mainFunction(); //line7
</script>
</body>
</html>Output:
Explanation:
- Line1 is for evenNumbers() function implementation.
- Line2 is for even numbers logic.
- Line3 Main function for filer() list.
- Line4 Filter() for filtering the list elements whether they are even numbers or not.
- Line5 List iteration for getting each element separately.
- Line6 displays the even numbers.
Example #4 – List filer for checking Odd numbers
JavaScript Code:
<!DOCTYPE html>
<html>
<body>
<script>
function getOddNumbers(number) { //line1
return number%2==1 //line2
}
function functionMain() { //line3
var oddNumberList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16].filter(getOddNumbers); //line4
for (var j = 0; j < oddNumberList.length; j++){//line5
document.write(oddNumberList[j]+" is a Odd Number <br>"); //line6
}
}
functionMain(); //line7
</script>
</body>
</html>Output:
Explanation:
- Line1 is for getOddNumbers() function implementation.
- Line2 is for odd numbers logic.
- Line3 Main function for filer() list.
- Line4 Filter() for filtering the list elements whether they are odd numbers or not.
- Line5 List iteration for getting each element separately.
- Line6 displays the odd numbers.
Example #5 – List filer for checking Duplicate String
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function getDuplicateNames(string) { //line1
return string=="Paramesh" //line2
}
function showFun() { //line3
var duplicateNamesList = ["Paramesh","Srikanth","Paramesh","Subbu","Srikanth","Paramesh"].filter(getDuplicateNames); //line4
for (var j = 0; j < duplicateNamesList.length; j++){//line5
document.write(duplicateNamesList[j]+" is duplicate name <br>"); //line6
}
}
showFun(); //line7
</script>
</body>
</html>Output:
Explanation:
- Line1 is for getDuplicateString() function implementation.
- Line2 is for duplicate string names logic.
- Line3 Main function for filer() list.
- Line4 Filter() for filtering the list elements whether they are the duplicate names or not.
- Line5 List iteration for getting each element separately.
- Line6 displays the duplicate names.
Conclusion
A filter list is just like an array list filter. We can filter the list based on the condition within the function. filter() method is used for filtering the list elements.