JAVA SCRIPT - Using an Associative Array to Store Form Element Names and Values

Using an Associative Array to Store Form Element Names and Values

Problem

You want to store form element names and values for later validation purposes.

Solution 

Use an associative array to store the elements, using the element identifiers as array index:

var elemArray = new Object(); // notice Object, not Array
var elem = document.forms[0].elements[0];
elemArray[elem.id] = elem.value;

Iterate over the array using a combination of keys() and forEach():

Object.keys(elemArray).forEach(function (key) {
 var value = elemArray[key];
 console.log(value);
 });

EXPLAIN 

Typically, JavaScript arrays use a numeric index:

arr[0] = value;

However, you can create an associative array in JavaScript, where the array index can be a string representing a keyword, mapping that string to a given value. In the solution, the array index is the identifier given the array element, and the actual array value is the form element value.

You can create an associative array, but you’re not using the Array object to do so. Using the Array object is risky and actively discouraged—especially if you’re using one of the built-in libraries that use the prototype attribute for extending objects, as people dis‐ covered when the popular Prototype.js library was first released several years ago.

When we use an Array to create an associative array, what we’re really doing is adding new properties to the Array, rather than adding new array elements. You could actually create an associative array with a RegExp or String, as well as an Array. All are JavaScript objects, which are associative arrays. When you’re adding a new array, element:

obj[propName] = "somevalue";

what you’re really doing is adding a new object property:

obj.propName = "somevalue";

Additionally, when you use an Array to create an associative array, you can no longer access the array elements by numeric index, and the length property returns zero. Instead of using an Array to create the associative array, use the JavaScript Object di‐ rectly. You get the exact same functionality, but avoid the clashes with libraries that extend the base Array object using prototype.


shows a web page with a form. When the form is submitted, all of the form elements of type text are accessed and stored in an associative array. The element IDs are used as the array keyword, and the values assigned to the array elements. Once collected, the associative array is passed to another function that could be used to val‐ idate the values, but in this case just creates a string of keyword/value pairs that are displayed. Demonstrating associative array with form elements

 Value 1: 
 
Value 2: 

 Value 3: 

 Value 4: 

 

In the example, notice that the array index is formed by the form element’s id. The Object keys() returns an array of the object’s enumerable properties, and forEach() traverses the array.

The dict Pattern

Dr. Axel Rauschmayer discusses a pattern called the dict pattern. Rather than creating a standard object, create one that has a null prototype to avoid inheriting existing prop‐ erties that can muck up the applications. The difference between using a standard object and using one with a null prototype is demonstrated in the following code snippet:

var newMap = {};
var key = 'toString';
console.log(key in newMap);
console.log(newMap[key]);
var secondMap = Object.create(null);
console.log(key in secondMap);
secondMap[key] = 'something diff';
console.log(key in secondMap);
console.log(secondMap[key]);

Here’s the result of the code (run in jsBin):

true
function toString() { [native code] }
false
true
"something diff"

The toString() method is, of course, a standard Object method. So when we test to see if it exists in a regularly created object, it does. However, if we create the null pro‐ totype object, toString() doesn’t exist. Not until we add it as a key.