Javascript Data

Javascript - Data

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

This means

That the program should contain as little data as possible, and
The data should be placed in one or more separate files

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,

The data used to place components on a form is stored in the dfm-file
The data to customized the application properties in stored in an ini-file
The data plotted in a graph is in one or more additional files

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).

Arrays

This is a simple array of arrays used to store some data. (In the actual application, the list is much larger.)

var images_array = [
[ 1, 780,3350, "1","1904 maneuvers No 1"],
[ 2, 600,3144, "2","1904 maneuvers No 2"],
[ 3, 850,2900, "3","1904 maneuvers No 3"],
[15, 476,3336,"15","1904 maneuvers No 15"],
[30,3427,5180,"30","1904 maneuvers No 30"],
[31,3613,6212,"31","1904 maneuvers No 31"],
[52,4216,3332,"52","1904 maneuvers No 52"]

]

Unfortunately, this technique does not associate names with the fields.

Objects

Unlike arrays, javascript objects store data via key/value pairs separated with commas as in the following object literal.

someObject = {
  param1 : 4,
  param2 : "any string",
  paramn : "another string" // no comma after the last parameter
}

These can be accessed via code similar to

x = someObject.param1;    // uses dot notation

someObject.param1 = 12;   // more dot notation

s = someObject["param2"]; // uses array syntax

Objects of Objects

In an ini file, data is normally grouped into named sections similar to this code snippet taken from modtran.

Application = { inputBoxes: { pco2: { label: "CO<sub>2</sub> (ppm)", value: 400, explanation: 'Atmospheric CO<sub>2</sub> concentration in ppm' }, ... } }

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 -

Property
label	Label for the data input field
value	The default value for the data input field
explanation	This is displayed when the mouse moves over the label

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.

_ref = Application.inputBoxes;
for (inputName in _ref) {
  inputObject = _ref[inputName];
  inputElement = document.getElementById(inputName + "-input");
  inputElement.innerHTML = '<input name="' + inputName + '" value="' + inputObject.value + '">';

  inputElement = document.getElementById(inputName + "-expl");
  inputElement.innerHTML = inputObject.label;
}

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.

inputElement.addEventListener('change', (function(evt) {
  var _ref1, inputName;
  inputName = evt.target.name;
  if ((_ref1 = Application.inputBoxes[inputName]) != null) {
    _ref1.value = evt.target.value;
  }
}), false);

There are several things that I don't like about the modtran code.

It mixes data and program in the same file: However, in this case, because the amount of configuration data is rather small, I would have probably done the same thing.
Each component reads it own data and then calls a common routine to create a plot: I prefer to call a common routine that reads all the data before executing a common function. I have no idea which is "better".

More Examples

The example above is for input fields - this example is for a combobox selector.

Application = { selectors: { h2otscaled: { choices: ['Water Vapor Pressure', 'Relative Humidity'], values: [0, 1], selected: 0, label: 'Holding Fixed', explanation: 'When the .... ' }, model: { choices: ['Tropical Atmosphere', [shortened for readability], '1976 U.S. Standard Atmosphere'], values: [1, 2, 3, 4, 5, 6], selected: 1 },

This defines 2 buttons.

Application = { pushButtons: { toBackground: { value: 'Save This Run to Background' }, rawOutput: { value: 'Show Raw Model Output' } },

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.

var someArray       = new Array( 100 ); // this defines the size
var someArray_count = 0;

function mcAddToSomeArray(year, co2Concentration){

  var temp = new Object();
  temp.year          = year; 
  temp.Concentration = co2Concentration; 

  someArray[someArray_count] = temp;

  someArray_count++;
}

 mcAddToSomeArray(1958, 316.16);
 mcAddToSomeArray(1959, 316.04);
 mcAddToSomeArray(1960, 317.17);
 mcAddToSomeArray(1961, 318.04);
// many more entries below this

The data is accessed as

  for (var i = 0; i < someArray_count; i++) {
    var CO2  = someArray[i].Concentration ;
    var year = someArray[i].year;
    var temp = Sensitivity * mcLog2(CO2/baseCO2) + baseTemp ;

    x.push( year ); // These arrays are used
    y.push( temp ); //   to plot the data
  }

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

var someArray = [];

function mcAddToSomeArray(year, co2Concentration){

  var temp = new Object();
  temp.year          = year; 
  temp.Concentration = co2Concentration; 

  someArray.push(temp);
}

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

Arrays store data
Objects store data as key/value pairs - aka associative array, hash, map - depending on the language
In javascript, objects are also used to replace the record and struct constructs in other languages
(someArray.map(someFunction) is not related to the map mentioned above.)
Arrays are defined using square brackets
Objects are defined using curly braces
Array elements are always accessed via an integer index - the first element is zero!
Object elements are always accessed via a keyname (fieldname)

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

Object literal	someObject = {};	In the examples above, good when only one instance is required
Class definition Object prototype	function TsomeObject(){} someObject = new TsomeObject()	Used when several instances are required The function is just the class constructor, methods are defined via the prototype property I always start class definitions with a capital-T (for type)
class keyword	class TsomeClass{} someObject = new TsomeClass()	This is a far superior interface, but is NOT supported in many browsers

References

Objects Tutorial - javaScript.info: Pretty good - lots of examples
JavaScript Array Reference - w3schools.com: List of available methods
Classes - mozilla.org: Shows how to use the class keyword - fails in many browsers

JSON

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

Single quotes can not be used to specify a string
Objects can not contain methods (functions) - only data is allowed
Keynames require double quotes - javascript keynames don't

To convert javascript objects and arrays to/from JSON format, use

yy = JSON.stringify(xx); // xx is either an object or an array
zz = JSON.parse(yy);     // yy is a JSON string

For more JSON details, see the w3schools tutorial and wikipedia.

Author: Robert Clemenzi

integer	someArray[0][0]	Value
year = 0	someArray[0][year]	Variable

dot notation	someArray[0].year	No quotes
string	someArray[0]["year"]	Either double or single quotes required
yr = 'year'	someArray[0][yr]	String variable

Array	mcArray = [];	square brackets
Object	mcObject = {};	curly braces