Given an HTML document having multiple arrays with some elements and the task is to get the common elements from arrays with the help of JavaScript. There are two approaches that are discussed below.
Approach 1: First get the arrays in 2-dimensional format then take the first array by shift() method and then filter out the elements from the first array which are common in all by using filter() method. The elements which are common in all arrays can be checked by every() method and if the element of first array matches with all elements then that element is returned.
- Example:
<!DOCTYPE HTML><html><head><title>Finding matches between more than2 JavaScript arrays</title><style>body {text-align:center;}h1 {color: green;}#neveropen {font-size: 16px;font-weight: bold;}#gfg {color: green;font-size: 18px;font-weight: bold;}</style></head><bodystyle=""><h1>neveropen</h1><pid="neveropen"></p><buttononClick="GFG_Fun()">click here</button><pid="gfg"></p><script>var up = document.getElementById('neveropen');var down = document.getElementById('gfg');var arr1 = [1, 3, 5, 7, 9];var arr2 = [1, 2, 4, 5, 7];var arr3 = [1, 2, 5, 7, 8];var arr = [arr1, arr2, arr3];up.innerHTML ="Click on button to get the common elements from these"+" array<br>Array1 - [" + arr1 + "]<br>Array2 -"+" [" + arr2 + "]<br>Array3 - [" + arr3 + "]";function GFG_Fun() {arr4 = arr.slice();down.innerHTML = arr4.shift().filter(function(v) {return arr4.every(function(a) {return a.indexOf(v) !== -1;});});}</script></body></html> - Output:
Approach 2: First get the arrays in 2-dimensional format then use the reduce() method to get the access to all arrays one by one. variable(p) contains each array one by one and returns only elements of the array which are in variable(c) array by using filter() method. At the end variable(c) contains the array of common elements.
- Example:
<!DOCTYPE HTML><html><head><title>Finding matches between more than2 JavaScript arrays</title><style>body {text-align:center;}h1 {color: green;}#neveropen {font-size: 16px;font-weight: bold;}#gfg {color: green;font-size: 18px;font-weight: bold;}</style></head><bodystyle=""><h1>neveropen</h1><pid="neveropen"></p><buttononClick="GFG_Fun()">click here</button><pid="gfg"></p><script>var up = document.getElementById('neveropen');var down = document.getElementById('gfg');var arr1 = [1, 3, 5, 7, 9];var arr2 = [1, 2, 4, 5, 7];var arr3 = [1, 2, 5, 7, 8];var arr = [arr1, arr2, arr3];up.innerHTML ="Click on button to get the common elements from these"+" array<br>Array1 - [" + arr1 + "]<br>Array2 -"+" [" + arr2 + "]<br>Array3 - [" + arr3 + "]";function GFG_Fun() {down.innerHTML = arr.reduce((p, c) =>p.filter(e => c.includes(e)));}</script></body></html> -
Output:
