I am making a special "calculator" which accepts user input and looks up data in a table to find a result. But I'm having trouble with how best to do this, to avoid tons and tons of if statements.

As an example, say there are some sets of radio buttons, and each bination of buttons has a unique value which I want to show the user. What sort of data structure would I use in JavaScript to account for each bination of buttons and look up the corresponding value?

Edit: upon request, here is some example data:

| Type  | Color  | Output value |
| small | red    | 21.9         |
| small | blue   | 27.3         |
| small | yellow | 26.8         |
| large | red    | 19.2         |
...

The user is then presented with two radio sets or dropdowns, one for type and one for color. Upon choosing the bination and pressing the button, the output value is shown.

In my specific case I have a table with 4 different columns and many binations. It looks like an array will do, but if it's an array of objects then I have to type the column names on every row (i.e.: {type: 'small', color: 'red', output: 21.9}, ...) -- is there a way to keep the associative nature of objects with the pact array syntax such as ['small','red',21.9] ?

I am making a special "calculator" which accepts user input and looks up data in a table to find a result. But I'm having trouble with how best to do this, to avoid tons and tons of if statements.

As an example, say there are some sets of radio buttons, and each bination of buttons has a unique value which I want to show the user. What sort of data structure would I use in JavaScript to account for each bination of buttons and look up the corresponding value?

Edit: upon request, here is some example data:

| Type  | Color  | Output value |
| small | red    | 21.9         |
| small | blue   | 27.3         |
| small | yellow | 26.8         |
| large | red    | 19.2         |
...

The user is then presented with two radio sets or dropdowns, one for type and one for color. Upon choosing the bination and pressing the button, the output value is shown.

In my specific case I have a table with 4 different columns and many binations. It looks like an array will do, but if it's an array of objects then I have to type the column names on every row (i.e.: {type: 'small', color: 'red', output: 21.9}, ...) -- is there a way to keep the associative nature of objects with the pact array syntax such as ['small','red',21.9] ?

• javascript

• Providing examples (input, output, size, type) will really let people start working on a good solution. – dheerosaur Commented Dec 17, 2010 at 15:32
• it depends. as table it should properly be an array of objects, IMO. – Free Consulting Commented Dec 17, 2010 at 15:34

5 Answers 5

Something like this?

var table = [
   ["High", 1, 2, 1, 0],
   ["Medium", 0, 1, 3, 2],
   ...
]

The first element in each array is the result of your "calculator"; the subsequent ones represent the selected indices of each set of radio buttons (though they could be the radio buttons' values too).

So say the user selects these radio buttons:

var selection = [0, 1, 3, 2];

Then iterate through the table, slicing each "row" to exclude the first element, and doing an array pare with selection:

for (var i = 0, row; row = table[i]; i++) {
    var sRow = row.slice(1);
    // Array pare sRow and selection (function arrayEqual not included)
    if (arrayEqual(sRow, selection)) {
        return row[0];
    }
}

// Will return "Medium"

Update: Using the poster's example data, the table would look like:

var table = [
   [21.9, "small", "red"],
   [27.3, "small", "blue"],
   ...
]

Maybe not be the best solution in terms of memory but very fast to look up, would be a lookup table like so:

var table = {
    'small': {
        'red': ...,
        'blue': ...
    },
    'large': {
        'red': ...,
        'blue':...
    },
    ...
}

Then you could access a value with just:

var value = table[type][color]

The drawback is that you have to repeat a lot of properties. But if you have not so many different values then this would be ok I think.

If you want to save memory, the best way would be to figure out some formula, assign numbers to your text values and pute the values on the fly (and cache the results).

An object, I guess?

var states = {
    state1: value1,
    state2: value2,
    state3: value3,
    (etc)
}

Well, we're working with JavaScript, so your choices are Arrays and Objects. The key factor determining which you should use is probably based on how you want to look things up. Arrays will have numeric indexes and must be sequential starting at 0, while Objects use Strings as their indexes (keys) and can contain anything you want them to.

If you're interested in a database-like library of sorts for JavaScript I'd look at TaffyDB. It allows you to query collections by passing in objects that represent the conditions that determine what you want returned.

A better option might be to keep the table in a string form, just like you've posted it:

table = 
    " small  red     21.9" +
    " small  blue    27.3" +
    " small  yellow  26.8" +
    " large  red     19.2"

For searching for a specific value you can use regular expressions, for example:

function find(type, color) {
   var re = new RegExp("\\b" + type + "\\s+" + color + "\\s+(\\S+)", "m");
   var m = table.match(re)
   return m ? m[1] : null;
}

The advantages of this method are 1) the "database" remains readable and easy to maintain 2) regexps will probably be faster than looping through nested arrays.