Javascript - Data

In my opinion, programs should be data driven (as much as possible).

This means

Of course, large amounts of data should be in a database, but the data used to customize the program should be in a separate file.

With Delphi,

With web pages, the form structure is defined via html and css. In most of my applications, the html is simply placed in the html file. However, it is common for many applications to generate the html code via asp, php, ruby, or some other program that runs on a server. Another possibility is for interface components to be created as required via javascript.

Program configuration data is typically read from an ASCII file. ini files are common with Windows application. cfg files are common with other systems. Web applications tend to use JASON and xml files.

Unfortunately, there is no way for a web page to automatically read a simple text file unless a server is used - an understandable security precaution. As a result, many of my applications place the configuration data in a javascript file. As a rule, these files contain only data and no methods (functions).


This is a simple array of arrays used to store some data. (In the actual application, the list is much larger.) Unfortunately, this technique does not associate names with the fields.


Unlike arrays, javascript objects store data via key/value pairs separated with commas as in the following object literal. These can be accessed via code similar to

Objects of Objects

In an ini file, data is normally grouped into named sections similar to this code snippet taken from modtran. In the example code, Application is an object that contains both data and code. The example above shows just the data structure defined under inputBoxes. Each input field on the web page is associated with a data record similar to pco2 where each record contains the same 3 properties -

The associated display components are not coded in the html file. Instead, they are created (via javascript) inside a couple of div elements similar to the following.

Data in this format has the advantage that the code can simply iterate through the list. The following code fragment creates the display elements. The code also attaches the appropriate event handlers. The following fragment demonstrates how to reference properties defined above. It is important to note that Application is explicitly used to access the data since the keyword this used in other object oriented languages points to the form component and NOT to the object. There are several things that I don't like about the modtran code.

More Examples

The example above is for input fields - this example is for a combobox selector. This defines 2 buttons. In many ways, this technique is similar to a Delphi dfm file - except that it doesn't include size or position. The other, fairly major, difference is that this does not attach the events. The modtran code attaches those during initialization.

Tabular data

For small amounts of tabular data, something like this is easier than setting up a database. The data is accessed as

This is an alternate technique using a variable size array and push.

The w3schools help on arrays is a bit confusing. Eventually, way down the page, it warns you that defining a new array with a single numeric parameter creates an array of that size. With most languages, that would be the first line of the help, not a warning in the lower part of the examples.

Arrays vs Objects

Javascript has 2 different types of objects, the newer versions include a third type using the class keyword.




The techniques described above are almost identical to the JSON (JavaScript Object Notation) data-interchange format with the following exceptions.

To convert javascript objects and arrays to/from JSON format, use For more JSON details, see the w3schools tutorial and wikipedia.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Data.html