Associative Arrays

December 19, 2008

If you've used javascript much, you are probably familiar with arrays. Typically arrays are used to manage lists of items. I frequently use arrays for maintaining information about the state of pages and quiz questions in learning modules, storing a series of properties for each item.

But, there is a problem. To find the particular item you want to use, you must loop through the whole array. Sometimes you can get yourself into a situation requiring multiple loops to get one item of information and performance will suffer.

I recently got to wondering if there weren't a way to jump straight to the desired item, if the ID of the item were known. Yes there is!

Enter "associative arrays". Associative arrays allow you to index items by any string key, not just the usual arbitrary index numbers. So you can go straight to the exact item by name without testing for property matches while looping through the array.

More after the jump...

Ads by Google

Posted by ellen at December 19, 2008 01:06 PM

In other words, instead of

 for (var i=0; i < itemList.length; i++)  {
           if (itemList[i].id == myItemID) { 
              itemList[i].property = newValue;
            }
     }

You can use

itemList['myItemID'].property = newValue;

One thing to keep in mind, however is that Javascript doesn't actually have associative arrays. The "associative arrays" I described above are really Objects which act as hash tables, or tables of values that are associated with keys. In the case shown above, I am using 'myItemID' as the key to find the correct item.

The problem with their not being a real Array() object is that you can't loop through the array in the normal way, because an Object() does not have a Length property. Thus you can't test for



 i < itemList.length

You can, however, use



for var in

for those times when you MUST loop through this type of array.

In my learning module example, I store the interactions in an array like this:



 var IntArray = new Object(); //interactions object

   

      IntArray['p03_000'] = {tries:1, ascore:1, req:1, msg:'Completed', quiz:100100000003},

      IntArray['p03_001'] = {tries:1, ascore:0, req:1, msg:'Try again?', quiz:100100000003},

      IntArray['p03_002'] = {tries:0, ascore:0, req:1, msg:'Not attempted', quiz:100100000003},

      IntArray['p03_003'] = {tries:1, ascore:1, req:1, msg:'Completed', quiz:100100000003},

When someone completes a question or interaction, I update just that specific item with:



itemList['specificItemID'].ascore = 1;

But at the end of the quiz, I want it to print out ALL interactions with their scores and other information. At that point, I use

 outputBlock.innerHTML=('<br/>');

  for (var i in itemList)  {

	  var itm = itemList[i];

	 outputBlock.innerHTML+=('Question '+i+ ' Score: ',+ascore'+itm.ascore+', Tries: '+itm.tries+', '+msg+'<br\/>');