Home / Programming / javascript / rg

Part 1: The JavaScript Array Revisited

I had two goals in mind when I first set out to modify Andy King's original version of the Universally Related Popup Menus (URPMs):  The first was to make it more suitable for submitting data to a server.  The second was to simplify the JavaScript "O" objects used to store all the related list data.  My primary motivation here was that I could never get the parentheses and commas right!  Modifying the script to use one form was fairly straightforward; mainly, it involved converting form references to elements.  Simplifying the list data structure, on the other hand, proved to be a very elusive goal - until now!

The "O" Objects Array:

if (v) {

  m = new Array(

         new Array(

                 new O("3-D Animation","/3d/", new Array(

//                              new O("Glossary","/3d/glossary/", null),

                         new O("Lesson56","/3d/lesson56/", new Array(

                                new O("56.1","/3d/lesson56/", null),

                                new O("56.2","/3d/lesson56/part2.html",null),

...                             ))

                 ),

                 new O("Design","/dlab/", new Array(

                         new O("About","/dlab/about.html", new Array(

                                new O("About.1","/3d/lesson56/", null),

                                new O("About.2",

...

Enter XML

It was a match made in code heaven!  Now that I've become more familiar with XML, I can see that what I was trying to do with my own array (see Version II), without even realizing it, was to emulate an XML structure!  In this article I'm going to explain how I finally made the jump into using a 100% XML solution, which I developed in Internet Explorer 6 and then tested in Mozilla Firefox 1.0.1 and Opera 7.6.  The two previous versions of IE - 5.5 and 5.0 - should also work.  Number 7.6 is the magic number for Opera browsers because it is the first version to implement the JavaScript DOMParser, which is needed to read in the XML.  While researching this article, I stumbled across some web sites featuring custom JavaScript parsers (see references below for an example).  That might be a worthy solution for browsers which do not have a DOMParser.  Having said that, let's go over how to use the scripts first; for those of you who want to learn about extra features, I go into more detail.

The JavaScript Array vs. XML

Here is a comparison of the data structures.  What a difference it makes when you use a technology which is meant for displaying data!

 

Legend:

blue text:           JavaScript Code
green text:         HTML markup
red text:            ASP code
purple text:       XML markup
maroon text:     SQL

OLD ARRAY:

//an empty array that will hold the final Objects.

var m            = new Array();

var manufacturer = new Array(); //list 1

var model        = new Array(); //list 2

var level        = new Array(); //list 3

 

 

 manufacturer[0]=["ACURA", "ACU"];

  model[0]="CL";   //no value

   level[0]=["2.2 PREMIUM", "2.2"];

   level[1]="2.3";

   level[2]="3.0";

   level[3]=[];    //"" still works too

  model[1]="EL";

   level[4]=["PREMIUM", "PRE"];

   level[5]="SE";

   level[6]=["SPORT", "SP"];

   level[7]=[];

  model[2]=["INTEGRA", "INT"];

   level[8]="GS";

   level[9]=["GS-R", "GRS"];

   level[10]="LS";

   level[11]="RS";

   level[12]="SE";

   level[13]=["TYPE-R", "TYR"];

   level[14]=[];

  model[3]=[];

 manufacturer[1]=["ALFA ROMEO", "AR"];

  model[4]=["SEDAN LS", "SLS"];

   level[31]=["LEVEL N/A", "NA"];

   level[32]=[];

  model[5]=["SPIDER", "SPI"];

   level[33]=["LEVEL N/A", "NA"];

   level[34]=["VELOCE", "VEL"];

   level[35]=[];

  model[6]=[];

  ...

XML:

<?xml version="1.0" encoding="windows-1252" ?>

<URPMs>

  <m1 value="1" desc="ACURA">

    <m2 value="2" desc="CL">

      <m3 value="7">2.2 PREMIUM</m3>

      <m3 value="4">2.3</m3>

      <m3 value="5">3.0</m3>

    </m2>

    <m2 value="8" desc="EL">

      <m3 value="10">PREMIUM</m3>

      <m3 value="1">SE</m3>

      <m3 value="9">SPORT</m3>

    </m2>

    <m2 value="1" desc="INTEGRA">

      <m3 value="3">GS</m3>

      <m3 value="6">GS-R</m3>

      <m3 value="2">LS</m3>

      <m3 value="18">RS</m3>

      <m3 value="8">SE</m3>

      <m3 value="17">TYPE-R</m3>

    </m2>

  </m1>

  <m1 value="2" desc="ALFA ROMEO">

    <m2 value="12" desc="SEDAN LS">

      <m3 value="23">LEVEL N/A</m3>

    </m2>

    <m2 value="13" desc="SPIDER">

      <m3 value="24">LEVEL N/A</m3>

      <m3 value="25">VELOCE</m3>

    </m2>

  </m1>   

...

 

If you don't have some familiarity with XML, there's lots of information right here on the WebReference XML Index.  Don't be concerned if you're not an expert on the subject because the beauty of this implementation is that you really don't have to be an XML guru in order to use it!  Here's a quick overview of how the data's arranged.  Each child list is nested between its parent's tags, except for the last one, which simply contains display text between the opening and closing tags (the parent lists store theirs as a "desc" attribute.)    The "value" attribute contains the codes to be sent to the server upon form submission.  Retrieving each list's items becomes a snap now, because XML already has lots of built-in methods for navigating through the nodes.  Instead of using field names from the database, I chose to use generic (m1, m2, etc.) naming so that it's easier for you to configure the script.  This is much simpler than those awkward JavaScript arrays!