Corresponding Arrays
It is often necessary to use a pair of arrays, called corresponding arrays to perform "table look-up" functions. Shown below, for example, are two arrays. Array states contains state names and array codes contains postal abbreviations. These are corresponding arrays in that the values in the first array correspond with values in the
second array at the same positional element.
states names array
states[0] = "Alabama";
states[1] = "Alaska";
states[2] = "Arizona";
states[3] = "Arkansas";
states[4] = "California";
...
|
|
states abbreviations array
codes[0] = "AL";
codes[1] = "AK";
codes[2] = "AZ";
codes[3] = "AR";
codes[4] = "CA";
...
|
Figure 6-5. Corresponding Arrays.
A table-lookup application uses corresponding arrays to "look up" a value in one array that
corresponds with a value in a second array. In the following example, a state name is entered
into the textbox and the corresponding postal abbreviation is reported.
The postal code for
is
Figure 6-6. A table look-up application.
Two arrays are required. states array holds state names and
codes array holds postal codes. Both are 50 elements in length.
These arrays are declared as global and are created one time when the page loads.
var states = new Array();
var codes = new Array();
function buildArrays()
{
states[0] = "Alabama"; codes[0] = "AL";
states[1] = "Alaska"; codes[1] = "AK";
states[2] = "Arizona"; codes[2] = "AZ";
states[3] = "Arkansas"; codes[3] = "AR";
states[4] = "California"; codes[4] = "CA";
states[5] = "Colorado"; codes[5] = "CO";
states[6] = "Connecticut"; codes[6] = "CT";
states[7] = "Delaware"; codes[7] = "DE";
states[8] = "Florida"; codes[8] = "FL";
states[9] = "Georgia"; codes[9] = "GA";
states[10] = "Hawaii"; codes[10] = "HI";
states[11] = "Idaho"; codes[11] = "ID";
states[12] = "Illinois"; codes[12] = "IL";
states[13] = "Indiana"; codes[13] = "IN";
states[14] = "Iowa"; codes[14] = "IA";
states[15] = "Kansas"; codes[15] = "KS";
states[16] = "Kentucky"; codes[16] = "KY";
states[17] = "Louisiana"; codes[17] = "LA";
states[18] = "Maine"; codes[18] = "ME";
states[19] = "Maryland"; codes[19] = "MD";
states[20] = "Massachusetts"; codes[20] = "MA";
states[21] = "Michigan"; codes[21] = "MI";
states[22] = "Minnesota"; codes[22] = "MN";
states[23] = "Mississippi"; codes[23] = "MS";
states[24] = "Missouri"; codes[24] = "MO";
states[25] = "Montana"; codes[25] = "MT";
states[26] = "Nebraska"; codes[26] = "NE";
states[27] = "Nevada"; codes[27] = "NV";
states[28] = "New Hampshire"; codes[28] = "NH";
states[29] = "New Jersey"; codes[29] = "NJ";
states[30] = "New Mexico"; codes[30] = "NM";
states[31] = "New York"; codes[31] = "NY";
states[32] = "North Carolina"; codes[32] = "NC";
states[33] = "North Dakota"; codes[33] = "ND";
states[34] = "Ohio"; codes[34] = "OH";
states[35] = "Oklahoma"; codes[35] = "OK";
states[36] = "Oregon"; codes[36] = "OR";
states[37] = "Pennsylvania"; codes[37] = "PA";
states[38] = "Rhode Island"; codes[38] = "RI";
states[39] = "South Carolina"; codes[39] = "SC";
states[40] = "South Dakota"; codes[40] = "SD";
states[41] = "Tennessee"; codes[41] = "TN";
states[42] = "Texas"; codes[42] = "TX";
states[43] = "Utah"; codes[43] = "UT";
states[44] = "Vermont"; codes[44] = "VT";
states[45] = "Virginia"; codes[45] = "VA";
states[46] = "Washington"; codes[46] = "WA";
states[47] = "West Virginia"; codes[47] = "WV";
states[48] = "Wisconsin"; codes[48] = "WI";
states[49] = "Wyoming"; codes[49] = "WY";
}
function init()
{
buildArrays();
var findBtn = document.getElementById("findBtn");
findBtn.onclick=find;
var codeOut = document.getElementById("codeOut");
codeOut.onfocus=codeOut.blur;
}
window.onload=init;
The postal code for
<input id="stateIn" type="text" value="Alabama"
style="width:100px"/> is
<input id="codeOut" type="text" value="AL" style="width:30px; font-weight:bold; text-align:center"/>
<input type="button" value="Find" id="findBtn"/>
<span id="msg" style="color:red"></span>
Listing 6-5. Code to create corresponding arrays.
The user enters a state name into the textbox and clicks the "Find" button to locate the corresponding postal code. Processing is handled by function find(), shown in the following listing.
...
function find()
{
var inputName = document.getElementById("stateIn").value.toLowerCase();
for (i=0; i < states.length; i++) {
var arrayName = states[i].toLowerCase()
if (arrayName.indexOf(inputName) != -1) {
document.getElementById("stateIn").value = states[i];
document.getElementById("codeOut").value = codes[i];
break;
}
}
if (i == states.length) {
document.getElementById("msg").innerText = "No match";
document.getElementById("codeOut").value = "";
}
else {
document.getElementById("msg").innerText = "";
}
}
Listing 6-6. Code to perform table look-up.
The general logic of this script involves iterating the elements of array states to find a state name that matches the name entered into the textbox. Then the
corresponding element in array codes is reported as the postal abbreviation.
The script does not restrict the user to entering names that exactly match those in the states array. Names can be entered in upper-case, lower-case, or
mixed-case characters; partial state names also can be entered.
During iteration of the states array to find a matching name, both the entered name and the array name are converted to lower-case characters by applying the
toLowerCase() string method to the two values. This conversion is
made so that both names are compared using the same character codes. These converted names
are also stored in variables inputName and arrayName, respectively, for convenience in referencing the two values.
var inputName = document.getElementById("stateIn").value.toLowerCase()
for (i=0; i < states.length; i++) {
var arrayName = states[i].toLowerCase()
...
}
Provision is made for entering partial state names in case the user does not know the full spelling and to make data entry more efficient. The search for a matching name, then, involves finding the entered "substring" inside one of the iterated names in the states array.
var inputName = document.getElementById("stateIn").value.toLowerCase()
for (i=0; i < states.length; i++) {
var arayName = states[i].toLowerCase()
if (arrayName.indexOf(inputName) != -1) {
document.getElementById("stateIn").value = states[i];
document.getElementById("codeOut").value = codes[i];
break;
}
}
...
The string.indexOf("substring") method is used for this search. This method returns the beginning numeric position in string of substring, a value that can range from 0 (the first position) to string.length - 1 (the last position). If substring is not contained in string, then -1 is returned.
In this example, the exact position of substring inputName inside string arrayName is not important. All that is needed to know is whether arrayName contains inputName.
Therefore, if the condition test
if (arrayName.indexOf(inputName) != -1)
is true, it is known that the entered state name was found somewhere inside the state name stored in the array.
If this is the case, then states[i] and codes[i] are the array elements corresponding to the entered name.
The codes[i] element is reported as the postal abbreviation; the states[i] element replaces the entered name so that the full state name is reported.
Provision is also made for reporting non-matches.
If the end of the for loop is reached with no match being found, then the value of loop index i will have incremented beyond the last element in the arrays;
it will be equal to the length of the arrays. Therefore if i is equal to states.length, then no match was found.
...
if (i == states.length) {
document.getElementById("msg").innerText = "No match";
document.getElementById("codeOut").value = "";
}
else {
document.getElementById("msg").innerText = "";
}
In this case, a "No match" message is displayed and the postal code textbox is erased. Otherwise, a match was found and any currently showing "No match" message is erased.