Javascript can filter arrays by looping through the elements and using the boolean If to apply the filter.
There is now, however, an easier method, the filter function.
The filter function consists of two parts: a callback function that returns the values of a boolean operation
function filtr(value) {
return value % 2 == 0;
}
and a filter function of the array that calls the callback function.
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].filter(filtr);
Here is an HTML file that utilizes a filter:
<html xmlns=’http://www.w3.org/1999/xhtml’>
<head profile=’http://gmpg.org/xfn/11′>
<title>Filter</title>
<style type=’text/css’>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; white-space: pre-wrap; padding: 10px; background: #BBBBBB}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active { }
#t1,#t2{background:#FFEEBB; font-weight: 800; padding: 5px}
#ta1,#ta2{background:#FFEEBB; font-weight: 800; border: 3px inset; padding: 5px}
#b1,#b2{border: 2px outset #AAAAAA; border-radius: 4px}
</style>
</head>
<body>
<input type=”text” id=”t1″ name=”t1″ value=’Enter a b c d or e’ ondblclick=’document.getElementById(“t1″).value=””;’ />
<input type=”text” id=”t2″ style=”width: 400px” name=”t2″ value=’Enter Doe Johnson Jones Smith or any part of the names’ ondblclick=’document.getElementById(“t2″).value=””;’ /><input type=”button” id=”b1″ name=”b1″ value=”Letters” onclick=’setVar();’> <input type=”button” id=”b2″ name=”b2″ value=”Names” onclick=’setVar2();’><textarea id=”ta1″ name=”ta1″ rows=”15″ cols=”100″ value=”” ></textarea><textarea id=”ta2″ name=”ta2″ rows=”15″ cols=”100″ value=”” ></textarea>
<script type=”text/javascript” src=”data.js”></script>
<script type=”text/javascript”>
myArray2 = new Array(); myArray3 = new Array(); myArraystr= new Array();
var let = “”; var str1 = “1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12”;
function setVar() {
let = document.getElementById(“t1”).value;
myArraystr = [“aa”, “ab”, “ba”, “bb”, “ca”, “cb”, “cc”, “da”, “db”, “dc”, “ea”, “eb”].filter(filtr2);
document.getElementById(“ta2”).value = myArraystr;
document.getElementById(“t1”).value = ‘Enter a b c d or e’;
}
function filtr(value) {
return value % 2 == 0;
}
function filtr2(value) {
return value.substr(0,1) == let && (value.substr(1,1) == “a” || value.substr(1,1) == “b”);
}
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].filter(filtr);
for (var i=0;i <= myArray.length – 1;i++) {
myArray2[i] = Math.sqrt(myArray[i]).toFixed(5) + ” “;
myArray3[i] = Math.log10(myArray[i]).toFixed(5) + ” “;
}
document.getElementById(“ta1”).value = str1 + “\n” + myArray + “\n” + myArray2 + “\n” + myArray3;
</script>
</body>
</html>
As can be seen, there is a call to a .js file. I will go into this in more detail later.
The myArray filter mentioned above takes an array of members from 1 to twelve and returns an arry containing only the
even numbers. It is then possible to create other arrays based on the filtered array:
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].filter(filtr);
for (var i=0;i <= myArray.length – 1;i++) {
myArray2[i] = Math.sqrt(myArray[i]).toFixed(5) + ” “;
myArray3[i] = Math.log10(myArray[i]).toFixed(5) + ” “;
}
In this case, the boolean operation, return value % 2 == 0; is hard coded and both the squareroot and common log of the resulting array are shown.
There is also a string filter that filters an array of letters based on an optional argument:
function setVar() {
let = document.getElementById(“t1”).value;
myArraystr = [“aa”, “ab”, “ba”, “bb”, “ca”, “cb”, “cc”, “da”, “db”, “dc”, “ea”, “eb”].filter(filtr2);
document.getElementById(“ta2”).value = myArraystr;
document.getElementById(“t1”).value = ‘Enter a b c d or e’;
}
function filtr2(value) {
return value.substr(0,1) == let && (value.substr(1,1) == “a” || value.substr(1,1) == “b”);
}
This filter takes the value from an input box as the first letter and either an a or b as the second letter.
I had previously mentioned data.js. For security reasons, javascript is not allowed to open or save files.
An exception is variables and functions placed in a .js file can be manipulated. This can be exploited to create what is in essence a database, similiar to a csv file, consisting of arrays.
Here is the data.js file:
let = document.getElementById(“t2”).value;
myArraystr2 = [“John Doe”, “Jane Doe”, “Bob Johnson”, “Ron Johnson”, “Dick Johnson”, “Jim Jones”, “Mary Jones”, “John Jones”, “Bill Smith”, “Jill Smith”, “Alice Smith”, “Bob Smith”].filter(filtr3);
var str = “”;
for (var i=0;i<=myArraystr2.length – 1; i++) {
str += myArraystr2[i] + ” “;
}
document.getElementById(“ta2”).value = str;
document.getElementById(“t2”).value = ‘Enter Doe Johnson Jones or Smith’;
}function filtr3(value) {
return value.indexOf(let) != -1 ;
}
This function filters an array of names and returns the names that that contain the substring taken from an input box.
Here is how file appears:
Click image for larger view
Tips & Tricks 