Using JavaScript Arrays for the Product Databases in E-Commerce, Storefront Applications

Get the WebProNews Newsletter:

[ Business]

A key ingredient in any e-commerce storefront application is the database. This is where information unique to a particular store is archived. One grouping of unique information is product data.

Hard coded Web pages to present product data are the alternative to using a database. This practice is generally not acceptable because hard coded pages are not easily modified to accommodate new, revised, and discontinued products.

Unfortunately, even simple database table files require special server side software to read the stored information. Fortunately there is an alternative to using server side databases.

Tables are simply text files with a numbered list of records separated into fields using commas or tabs. This is called a two dimensional array. In the JavaScript scripting language version 1.1 or higher, it is an easy matter to construct a two dimensional array. Below is an instance of a Javascript array. It is a sequentially numbered list of variable names to which values are assigned. The array is constructed using the JavaScript language written directly within the head tags of a html web page. The code will look something like this:

  • var car = new Array()
  • car[0] = 'red'
  • car[1] = 'green'
  • car[2] = 'blue'
  • The line "var car = new Array()" creates an instance of the “car” array. The subsequent lines populate the array with values.

    Now, if we first create a function “car”, and give it parameters and name the parameters, we can start to build a more complex array which will look like this:

  • function car(make,type,color){this make=make; this type=type; this color=color}
  • var line = new Array
  • line[0] = new car('General Motors','4 door','red')
  • line[1] = new car('Ford','2 door','green')
  • line[2] = new car('Chrysler','coupe','blue')
  • That is all there is to creating a two dimensional database array in JavaScript. It is an elegant method because it uses a minimum amount of code and can be easily accessed from within a Web browser on the client machine. For instance, to get the color of the Ford requires the following simple line of code:

  • line[1].color
  • This code will return the value ‘green’.

    Notice how this array looks very much like a database table with rows and columns. “line[n]” represents a record (row) while “color” is a field name (column). This defined array is a JavaScript database requiring no special server side software for access.

    In the actual array for an e-commerce application there are 9 fields which we define:

    1. type This is a product subset of a product category.

    2. desc A short description of the product.

    3. price The current product price.

    4. maker A three letter code to identify the maker of the product.

    5. pid The product ID or inventory number.

    6. state The state or country where the product is shipped from.

    7. special A three letter code to determine how a product is taxed, how shipping costs are computed, and what detail message to pop up.

    8. itemwt The shipping weight of an item.

    9. itemtax The tax rate for an item.

    Not all fields are used in the current version of MyStore software. They are, however, defined so current databases will be compatible with future versions of the software.

    Notice that the array size and the data type and size within a field have not been specified. This is a nice feature of JavaScript array databases. The array size is determined by the highest record number used while the field type is a character string of any length.

    Binary information such as an image file cannot be stored in a JavaScript array. However, the name of the image or the file name for the image can be stored. Since information in the array is always accessed from an html web page, an image can be written to the page by using the file name to form a link or reference to the image.

    Another nice feature of the JavaScript array is its small footprint. It takes about 100 Bytes to populate a record. The document within which the array resides is normally about 1Kbyte; so, a JavaScript database of 100 items will create a document of only about 11K.

    This small size is important for two reasons: 1) It is always prudent to keep files as small as possible from a storage and searchability standpoint. 2) The small size allows the entire database to be transferred over the internet in a short amount of time.

    Now comes an important difference between client side e-commerce software and server side software. In the server side scenario, when a customer wants to view information on a particular product, a query goes out to the server machine from the customers client machine. Based on the request, the server machine generates an html page from specified information in the server’s database. The page is then sent to the client machine for viewing by the customer. Each time the customer selects a new product, the process is repeated.

    In the client side scenario, when a customer wants information on a particular product, a request is made to the server for the entire JavaScript database for that product category. Upon receipt of the database, the customer’s computer generates a page for viewing. Whenever the customer wants to view another product in the same category, the information is extracted from the now resident database. Another internet transaction is not required. This means an almost instantaneous response to the customer’s request and a tremendous reduction of server resources and internet congestion.

    Mel Davey is the creator of ImagineNation (http://imaginenation.com/), a full service E-Commerce Application Service Provider, offering Storefronts, Order Management Utilities, and 3rd party credit card processing.

    Using JavaScript Arrays for the Product Databases in E-Commerce, Storefront Applications
    Top Rated White Papers and Resources
    • Guest


    • Join for Access to Our Exclusive Web Tools
    • Sidebar Top
    • Sidebar Middle
    • Sign Up For The Free Newsletter
    • Sidebar Bottom