How to check whether multiple values exist within an Javascript array
So, I'm using Jquery and have two arrays both with multiple values and I want to check whether all the values in the first array exist in the second.
For instance, example 1...
Array A contains the following values
34, 78, 89
Array B contains the following values
78, 67, 34, 99, 56, 89
This would return true
...example 2:
Array A contains the following values
34, 78, 89
Array B contains the following values
78, 67, 99, 56, 89
This would return false
...example 3:
Array A contains the following values
34, 78, 89
Array B contains the following values
78, 89
This would return false
So far I have tried to solve this by:
- Extending Jquery with a custom 'compare' method to compare the two arrays. Problem is this only returns true when the arrays are identical and as you can see from example 1 I want it to return true even if they aren't identical but at least contain the value
- using Jquerys .inArray function, but this only checks for one value in an array, not multiple.
Any light that anyone could throw on this would be great.
Native JavaScript solution
var success = array_a.every(function(val) {
return array_b.indexOf(val) !== -1;
});
You'll need compatibility patches for every
and indexOf
if you're supporting older browsers, including IE8.
-
Compatibility patch from MDN for
.every()
. -
Compatibility patch from MDN for
.indexOf()
.
Full jQuery solution
var success = $.grep(array_a, function(v,i) {
return $.inArray(v, array_b) !== -1;
}).length === array_a.length;
Uses $.grep
with $.inArray
.
ES2015 Solution
The native solution above can be shortened using ES2015's arrow function syntax and its .includes()
method:
let success = array_a.every((val) => array_b.includes(val))
function containsAll(needles, haystack){
for(var i = 0; i < needles.length; i++){
if($.inArray(needles[i], haystack) == -1) return false;
}
return true;
}
containsAll([34, 78, 89], [78, 67, 34, 99, 56, 89]); // true
containsAll([34, 78, 89], [78, 67, 99, 56, 89]); // false
containsAll([34, 78, 89], [78, 89]); // false
A one-liner to test that all of the elements in arr1
exist in arr2
...
With es6:
var containsAll = arr1.every(i => arr2.includes(i));
Without es6:
var containsAll = arr1.every(function (i) { return arr2.includes(i); });
I noticed that the question is about solving this with jQuery, but if anyone else who is not limited to jQuery comes around then there is a simple solution using underscore js.
Using underscore js you can do:
_.intersection(ArrayA, ArrayB).length === ArrayA.length;
From the docs:
intersection_.intersection(*arrays) Computes the list of values that are the intersection of all the arrays. Each value in the result is present in each of the arrays.
_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]); => [1, 2]
Ergo, if one of the items in ArrayA was missing in ArrayB, then the intersection would be shorter than ArrayA.
You could take a Set
and check all items agains it.
const
containsAll = (needles, haystack) =>
needles.every(Set.prototype.has, new Set(haystack));
console.log(containsAll([105, 112, 103], [106, 105, 103, 112]));