Store a table of data in a JavaScript variable

Question

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 combination 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 combination 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 combination and pressing the button, the output value is shown.

In my specific case I have a table with 4 different columns and many combinations. 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 compact array syntax such as ['small','red',21.9] ?

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

David Tang · Accepted Answer · 2010-12-17 15:33:42Z

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 compare with selection:

for (var i = 0, row; row = table[i]; i++) {
    var sRow = row.slice(1);
    // Array compare 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"],
   ...
]

edited Dec 17, 2010 at 15:33

answered Dec 17, 2010 at 15:28

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2010-12-17 15:53:05Z

3

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 compute the values on the fly (and cache the results).

edited Dec 17, 2010 at 15:53

answered Dec 17, 2010 at 15:35

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Spiny Norman · Accepted Answer · 2010-12-17 15:20:12Z

1

An object, I guess?

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

answered Dec 17, 2010 at 15:20

Spiny Norman

8,3271 gold badge34 silver badges57 bronze badges

Comments

g.d.d.c · Accepted Answer · 2010-12-17 15:22:02Z

0

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.

answered Dec 17, 2010 at 15:22

g.d.d.c

48.3k12 gold badges105 silver badges116 bronze badges

Comments

user187291 · Accepted Answer · 2010-12-17 16:25:49Z

-1

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.

answered Dec 17, 2010 at 16:25

user187291

54.1k19 gold badges98 silver badges127 bronze badges

1 Comment

Felix Kling Over a year ago

But not faster than object access ;) and I won't be sure that regex is faster if you have a long string and it can potentially fail several times...

Collectives™ on Stack Overflow

Store a table of data in a JavaScript variable

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related