Is there a simple way to create a javascript lookup table?

Question

I'm looking for a simple way of looking up a value, using javascript, against a number of dimensions:

eg. (I'm going to use products and product options to describe this, the data is coming from a database in a very similar format)

Colour  Size Price

Blue    S    £45

Blue    L    £98

Red     S    £65

Red     L    £31

So I then have a number of dropdowns on the page

Colour: Blue, Red

Size:   Small, Large

So - I want to know...given "Blue + Small", what the price is

I have no idea what order the dropdowns are in, or the order in which Colour and Size are pulled from the database

The data in javascript may be an array like this:

{Colour:Blue, Size:Medium, Price:48},{Colour:Blue, Size:Large, Price:82}

It's a crude example, but I can't work out an easy way to achieve this in javascript.

Answer 1

You can index prices in a two dimensional map on page load (with working fiddle).

1) I put the select values in lookup-tables in case you have to preload them:

var tables = {
    Colour: ["Blue", "Red"],
    Size: ["Small", "Medium", "Large"]
};

2) Here is your price table in array form:

var array = [
    {Colour: "Blue", Size: "Small", Price: 45},
    {Colour: "Blue", Size: "Medium", Price: 48},
    {Colour: "Blue", Size: "Large", Price: 98},
    {Colour: "Red", Size: "Small", Price: 65},
    {Colour: "Red", Size: "Large", Price: 31}
];

3) Initializing selects (populating values and event 'change'):

for (var key in tables)
    if (tables.hasOwnProperty(key)) {
        selects[key] = form[key];
        selects[key].addEventListener("change", updateSpan);

        var values = tables[key];
        len = values.length;
        for (i = 0; i < len; i++) {
            var option = document.createElement('option');
            option.appendChild(document.createTextNode(values[i]));
            form[key].appendChild(option);
        }
    }

4) Indexing your price table:

len = array.length;
for (i = 0; i < len; i++) {
    var record = array[i];

    if (typeof map[record.Colour] === 'undefined')
        map[record.Colour] = {};

    map[record.Colour][record.Size] = record.Price;
}

5) Function updateSpan (on select change):

function updateSpan() {
    var Colour = selects.Colour.options[selects.Colour.selectedIndex].value;
    var Size = selects.Size.options[selects.Size.selectedIndex].value;

    if (typeof map[Colour] !== 'undefined' && typeof map[Colour][Size] !== 'undefined')
        span.textContent = map[Colour][Size];
    else
        span.textContent = "Price not defined to Colour: " + Colour + " and Size: " + Size + ".";
}

6) Debugging (hit F12 in Chrome or Firefox to open Console View).

Full indexed table:

console.log(map);

Just the price of 'Blue' & 'Small':

console.log(map['Blue']['Small']); // outputs the value: 45