Parsing Array Strings

Array elements can hold a single data item, either a number or a string. Suppose, though, that you wish to create an array with multiple data items. For example, suppose you want to maintain a contacts list as an array of names, phone numbers, and email addresses that can be used to look up individual information. Say that you have the following information you want to make available.

A. Azure, 555-1111, azure@email.com
B. Brown, 555-2222, bbrown@email.com
C. Brown, 555-3333, cbrown@email.com
D. Crimson, 555-4444, dcrimson@email.com
E. Gold, 555-5555, egold@email.com
F. Golden, 555-6666, fgolden@email.com
G. Green, 555-7777, ggreen@email.com

You can, of course store these strings of information in an array. However, you want to be able to handle the data items making up these strings separately. You want to display the information on separate lines or in different styles, or you want to format the email addresses as links. You need a way, then, of separating the strings into individual data items to report them as shown below.

Find:  
Figure 6-7. A table look-up application with parsed fields.

Scripting of this application is similar to the table look-up for postal codes. A contacts array is created when the page loads. Elements are strings with names, phone numbers, and email addresses. A find() function searches for matching names or partial names and displays the information. A major difference is in how the retrieved strings are broken down, or parsed, into separate data elements for individual display.


var contacts = new Array();

function loadArray()
{
	contacts[0] = "A. Azure, 555-1111, azure@email.com";
	contacts[1] = "B. Brown, 555-2222, bbrown@email.com";
	contacts[2] = "C. Brown, 555-3333, cbrown@email.com";
	contacts[3] = "D. Crimson, 555-4444, dcrimson@email.com";
	contacts[4] = "E. Gold, 555-5555, egold@email.com";
	contacts[5] = "F. Golden, 555-6666, fgolden@email.com";
	contacts[6] = "G. Green, 555-7777, ggreen@email.com";
}

function Find()
{
  document.getElementById("output").innerHTML = "";
  
  var searchName = document.getElementById("findString").value.toLowerCase();
  for (i=0; i < contacts.length; i++) {
    var arrayName = contacts[i].toLowerCase();
    if (arrayName.indexOf(searchName) != -1) {
      var infoArray = contacts[i].split(",");
      document.getElementById("output").innerHTML += "<br/>" +
        "<b>" + infoArray[0] + "</b><br/>" +
        infoArray[1] + "<br/>" +
        "<a href='mailto:'" + infoArray[2] + "'>" + infoArray[2] + "</a><br/>";
    }
  }
}

function init()
{
  loadArray(); 
  find();
    
  var findBtn = document.getElementById("findBtn");
  findBtn.onfocus=find;

}

window.onload=init;

Find: <input id="findString" type="text" style="width:100px" value="gold"/>
<input type="button" value="Find" id="findBtn"/><br/>
<span id="output"></span>

Listing 6-7. Code to perform a table look-up with parsed fields.

The matching string of contact information appears in array element contacts[i]. An easy way to separate a string into its component data items is by applying the split() method to the string and storing the individual items in their own array.


var infoArray = contacts[i].split(",");

This method automatically creates an array of elements, one for each substring of a string. The string is split into substrings by supplying a delimiter character, that is, a character that can be used as the separator for the substrings. In this example, a comma (",") is used to split the contacts[i] string since it separates the name from the phone number from the email address. With the above statement, array infoArray contains three elements, each storing one of these three substrings moving from left to right through the string.

InfoArray

E. Gold

555-5555

egold@email.com

Figure 6-8. A string split into an array.

(A delimiter character cannot be part of an actual data value. In this example, a comma does not appear within a data value.)

The remaining statements in the function display the three elements of this array. infoArray[0] contains the name, infoArray[1] contains the phone number, and infoArray[2] contains the email address, displayed one per line in the output area.

The email address is made into a link by surrounding it with an <a href="mailto:"> tag.


"<a href='mailto:" + infoArray[2]  + "'>" + infoArray[2] + "</a>"

When concatenated with an email address from the array, the following example code is written to the page to produce a link that opens the user's default email program and writes the supplied email address into the "To:" line.


<a href='mailto:egold@email.com'>egold@email.com</a>

Rather than working with information in strings, the contact data can be split among several corresponding arrays. There is no best solution. You are likely to employ different techniques to answer the particular need at hand.

Web Development Tutorials

Parsing Array Strings

TOP | NEXT: Array Methods