Check whether an array contains a particular element
Introduction
Hi All, How are you today? In this article we will see how we can check whether an array element is present in an array. We will be using JQuery to do this requirement. I hope you will like it.
Background
I know we all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. In that case, you will be using client side arrays too. So if you use client side arrays,sometimes you may need to check the array contains a particular element or not.Then only you can do some codes according to that. Here I am going to give you a demo of how we can do this requirement.
Using the code
To start with, as you all know we need to load the JQuery reference.
[js]
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
[/js]
Once you load the reference you are ready to go.
Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.
Shall we start then?
Add the elements to the array
We need to set our UI first right?
[html]
<body>
Check whether an array contains a particular element – Sibeesh Passion
<br/>
<br/>
<table>
<tr>
<td>
<input type="text" id="myText" />
</td>
<td>
<p id="addMe">Add Me</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<p id="showMe">Show Array Length</p>
</td>
<td id="showContent">Array length is
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<input type="text" id="searchText" />
</td>
<td>
<p id="searchMe">Search Me</p>
</td>
<td id="searchOutput">The given text </td>
</tr>
</table>
</body>
[/html]
So we have set our UI, and now if you run your page you can see output as follows.
Now we will add the needful scripts.
[js]
<script>
$(document).ready(function() {
var myArray = [];
var i = 0;
$("#addMe").click(function() {
myArray[i] = $("#myText").val();
$("#myText").val(”);
i++;
});
$("#showMe").click(function() {
$("#showContent").text("Array length is " + myArray.length);
});
$("#searchMe").click(function() {
if (jQuery.inArray($("#searchText").val(), myArray) > -1)
$("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");
else
$("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");
});
});
</script>
[/js]
As you can see we are adding elements to the array, checking the array element in the first two click functions. But what about the third click function. Bingo! there we are using jQuery.inArray function to check our element is present in the array or not.
No we will learn little about the jQuery.inArray function.
jQuery.inArray
The following code block describes how we can use jQuery.inArray
[js]
if (jQuery.inArray($("#searchText").val(), myArray) > -1)
$("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");
else
$("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");
[/js]
Complete Code
[html]
<html>
<head>
<title>Check whether an array contains a particular element – Sibeesh Passion</title>
<style>
p {
color: red;
width: 170px;
cursor: pointer;
border: 1px solid #ccc;
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
Check whether an array contains a particular element – Sibeesh Passion
<br/>
<br/>
<table>
<tr>
<td>
<input type="text" id="myText" />
</td>
<td>
<p id="addMe">Add Me</p>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<p id="showMe">Show Array Length</p>
</td>
<td id="showContent">Array length is
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<input type="text" id="searchText" />
</td>
<td>
<p id="searchMe">Search Me</p>
</td>
<td id="searchOutput">The given text </td>
</tr>
</table>
<script>
$(document).ready(function() {
var myArray = [];
var i = 0;
$("#addMe").click(function() {
myArray[i] = $("#myText").val();
$("#myText").val(”);
i++;
});
$("#showMe").click(function() {
$("#showContent").text("Array length is " + myArray.length);
});
$("#searchMe").click(function() {
if (jQuery.inArray($("#searchText").val(), myArray) > -1)
$("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");
else
$("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");
});
});
</script>
</body>
</html>
[/html]
Now we will run our page and see the output.
Output
That is all.
Conclusion
I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.
Thanks in advance. Happy coding!
Kindest Regards
Sibeesh Venu