How to retrieve values from Javascript associative array hash table?

Question

I have an array full of terms and their definitions like this:

 var definitions = [
        {label : "abdomen", def: "stomach, stomach area, belly, tummy"},
        {label : "ability", def: "skill"},
        {label : "abolish", def: "end, do away with, get rid of"},
                    etc
                ]

I want to write a for loop that basically runs through every single "label" and lists them out. For simply listing a single term I've tried different ways and none have worked:

 var definitionDiv = document.getElementById("definitionContainer");
 definitionDiv.appendChild(document.createTextNode(definitions["abdomen"));

or

 definitionDiv.appendChild(document.createTextNode(definitions.def["abdomen"));

or

 definitionDiv.appendChild(document.createTextNode(definitions.label[1]));

And none of them have worked. My desired end result is using a for loop to list all the labels as links which point to the def or definition. But first I need to overcome this hurdle.

Answer 1

For starters, you really want this:

definitionDiv.appendChild(document.createTextNode(definitions[0].label));

You would access the def property with definitions[0].def . For looping:

var i;
for (i = 0; i < definitions.length; i++) {
    var definition = definitions[i];
    // Use definition.label and definition.def however you want here.
}

Answer 2

In the current form definitions[i].label and definitions[i].def are what you're looking for.

You can also try to play with the representation if you want to access definitions by their labels instead of a numerical index, what you're looking for is more like a hash than an array.

In this case you may reorganize your array into an object, and the keys will be the labels.

var definitions = { // objects are hashes 
    abdomen: "stomach, stomach area, belly, tummy",
    ability: "skill",
    abolish: "end, do away with, get rid of",
    // key: value,
    // ...
};

This of course changes the way you go through the items, which now becomes an enumeration .

for (var label in definitions) {
   if (definitions.hasOwnProperty(key)) {
      // label is label
      // definition is definitions[label]
      alert(label + " => " + definitions[label]);
   }
}

Answer 3

If i'm following correctly you just want to end up with a list of links, label being what the user sees and the "def" being the "href" of the link?

If so you could do something like this:

var definitions = [
  {
    label: "abdomen",
    def: "stomach, stomach area, belly, tummy"
  },
  {
    label: "ability",
    def: "skill"
  },
  {
    label: "abolish",
    def: "end, do away with, get rid of"
  }

 ];

$.each(definitions, function(index, item) {
    $('#definitionContainer').append('<a href="' + item.def + '">' + item.label + '</a>');
});

a working example here: JSFiddle

Answer 4

To list a single term:

function getDef( which ) {
  for(var i=0,j=definitions.length; i<j; i++){
    if( definitions[i].label == which )
      return definitions[i].def;
  }
}

So:

var foo = getDef('ability'); // etc

To build a whole list of definitions:

var finalResult = $('<dl/>');

$( definitions ).each( function(i,e){
    var $dt = $('<dt/>').html( e.label );
    var $dd = $('<dd/>').html( e.def );
    finalResult.append( $dt, $dd );
});

$('#answer').append( finalResult );

Here's an example: http://jsfiddle.net/VyXdG/