Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Filter array based on another array in JavaScript
In this article, we are going to learn how to filter an array based on another array in JavaScript.
An Array in JavaScript is used to store different elements. These elements are stored at contiguous memory locations. By using index numbers, we can access any or each data element present in the array. Index numbers will start form 0.
Syntax
Following is the syntax of the array in JavaScript –
const array_name = [item1, item2, ...];
The following is the simple declaration of array in JavaScript,
Const colors = ['Blue', 'Limegreen', 'Orange', 'Black'];
Let’s assume some simple input and output scenarios -
Let’s assume a scenario where we have two arrays holding elements in it and some elements are common in both arrays. We need to filter the common elements.
Input arr1 = [1, 3, 7, 10]; arr2 = [3, 7]; Output = [1, 10];
Consider another scenario, where there are common elements(strings) in both arrays filter the common strings and return the unique elements.
Input arr1 = ['ravi', 'kunal', 'hari']; arr2 = ['ravi', 'sharma']; Output arr1 = ['kunal', 'hari'] arr2 = ['sharma']
Using array.filter() method
The filter() method generates a new array with elements that pass a test specified by a function. For empty elements, the filter() method does not execute the function.
Example
Following is an example of a filter array based on another array using array.filter() method.
<!DOCTYPE html>
<html>
<head>
<title>Filtering array on another array</title>
</head>
<body>
<script>
const array1 = [1, 3, 7, 10, 17, 18, 33, 45, 99];
const array2 = [10, 17, 33];
const filterArray = (array1, array2) => {
const filtered = array1.filter(el => {
return array2.indexOf(el) === -1;
});
return filtered;
};
document.write(filterArray(array1, array2));
</script>
</body>
</html>
Example
Following is another example of performing the given task using filter() method.
<!DOCTYPE html>
<html>
<head>
<title>Filtering array on another array</title>
</head>
<body>
<script>
var arr = [6, 1, 9, 4, 7].filter(
function(e) {
return this.indexOf(e) < 0;
},
[1, 4, 7]
);
document.write("Filtered array is: ", arr);
</script>
</body>
</html>
Example
The below program is another way to solve the task by using filter() method -
<!DOCTYPE html>
<html>
<head>
<title>Filtering array on another array</title>
</head>
<body>
<script>
let arr1 = ['Govind', 'Alekhya', 'Sarika', 'Raviteja', 'Pooja'];
let arr2 = ['Alekhya', 'Pooja'];
arr1 = arr1.filter(function(item) {
return !arr2.includes(item);
})
document.write(arr1);
</script>
</body>
</html>
Example
Following one more way to solve the task is by using the filter() method and includes() method.
<!DOCTYPE html>
<html>
<head>
<title>Filtering array on another array</title>
</head>
<body>
<script>
function filter_array(){
let arr1 = ['s', 'r', 'a', 'k', 'i'];
let arr2 = ['n', 's', 'k'];
var tempArray = arr2.filter(function(item) {
return !arr1.includes(item);
});
arr1 = arr1.filter(function(item) {
return !arr2.includes(item);
});
arr2 = tempArray;
document.write(arr1, "<br>");
document.write(arr2);
}
filter_array();
</script>
</body>
</html>
11K+ Views
