I’ve already written a post in the past discussing arrays in JavaScript that explains the basic usage of JavaScript arrays. In this post, we’ll specifically talk about how to check if an array contains a specific value or not.
Both JavaScript and jQuery come with built-in methods that return the position of a value in an array.
Using JavaScript Loop to Find an Item in an Array
An old-fashioned way to find a value in a specific array is to use a for loop. This is the most convenient loop type when we want to perform iteration over an array. Take a look at the following example:
let moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];
function findValueInArray(value, arr){
let result = "Doesn't exist";
for(let i=0; i<arr.length; i++){
let name = arr[i];
if(name == value){
result = 'Exist';
break;
}
}
return result;
}
findValueInArray('Pulp Fiction', moviesList);
// Result : Exist
findValueInArray('Avenger', moviesList);
// Result : Doesn't exist
As mentioned, this is an old-fashioned way to find an item in an array. Now let’s see how to do it more easily using the same built-in methods that come with JavaScript and jQuery.
Using ()Array.indexOf
The method ()Array.indexOf in JavaScript helps us find an item in an array. If the “item” is found in the array, the method will return the index position of the item, and if the item does not exist, it will return ‘-1‘.
This method works for both arrays and strings.
Syntax
array-or-string.indexOf()Here’s an example in action:
let moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];
let string = "Catch Me If You Can";
// Find in Array
moviesList.indexOf('Pulp Fiction');
// Result: 5
moviesList.indexOf('The Nun');
// Result: -1
// Find in String
string.indexOf('M');
// Result: 6Using ()jQuery.inArray
The method ()jQuery.inArray works identically. It will return the index position if it finds the value we’re looking for, and alternatively, it will return ‘-1‘ if the value is not found in the array.
This method also works for both arrays and strings.
Syntax
jQuery.inArray(value, array [, fromIndex ])Here’s an example in action:
<html lang="en">
<head>
<!-- Include jQuery Here to test... -->
</head>
<body>
<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
<script>
let arr = [4, "Pete", 8, "John"];
let $spans = $("span");
$spans.eq(0).text(jQuery.inArray("John", arr));
$spans.eq(1).text(jQuery.inArray(4, arr));
$spans.eq(2).text(jQuery.inArray("Karl", arr));
$spans.eq(3).text(jQuery.inArray("Pete", arr, 2));
</script>
</body>
</html>When this code runs, the output will be as follows:
// Result: "John" found at 3
// Result: 4 found at 0
// Result: "Karl" not found, so -1
// Result: "Pete" is in the array, but not at or after index 2, so -1That’s it. It’s worth noting that this current post has been copied and translated one-to-one from the following post on positronX.io. Credit goes to them, of course.
