Assign value of variable from JS array based on key

Question

I have a variable that takes its value from the current object's ID attribute, it will always look something like filtercolor-red:

$('.facet-options-list li input[id*=filtercolor]').each(function() {
 var filterColor = $(this).attr('id');
 ...
});

I also have an array that lists possible ID's and a corresponding HEX code:

var activeFilterBg;
var filterBgColor = [];
filterBgColor = {
 filtercolor-black: '#171710',
 filtercolor-blue: '#4C94B6',
 filtercolor-brown: '#50443D',
 filtercolor-gold: '#F6D069',
 filtercolor-green: '#96B14D',
 filtercolor-grey: '#A8AAA5',
 filtercolor-orange: '#DB5E46',
 filtercolor-pink: '#E78EB1',
 filtercolor-purple: '#59547E',
 filtercolor-red: '#D22200',
 filtercolor-silver: '#EBEBEB',
 filtercolor-white: '#FFF'
};

What I'd like to do is take filterColor and assign activeFilterBg the appropriate HEX code from filterBgColor. I could do this with a switch, but that seems kind of sloppy and gives a lot of room for mistakes in the future.

Do I have an option to somehow lookup the correct key and then assign a variable based upon it?

• tymeJV: var color = filterBgColor[filterColor]
• Jordan Running: As Guffa points out below, what you're doing here is assigning an empty Array to a variable (var filterBgColor = [];) and then throwing it away and assigning an Object to the same variable (filterBgColor = { ... }). It's important to know the distinction between Arrays and Objects in JavaScript. You should only use Arrays when you want numeric keys, e.g. var a = ["A", "B", "C"]; console.log(a[0]); // => "A". Otherwise you should use an Object: var o = { foo: "X", bar: "Y", ... }; console.log(o.foo); // => "X"
• Josh Burdick: Thanks @Jordan, I'm still just starting to wade into JS, thats a really helpful distinction.

Answer 1

That's not an array, that's an object. You assign an array to the variable, but then you immediately replace that with an object. An object works well for this, so just skip that array. (Note though, as Jordan pointed out, that the parameter names has to be quoted when they contain dashes.)

You can use the bracket syntax to access the object properties using the variable:

var activeFilterBg;
var filterBgColor = {
 'filtercolor-black': '#171710',
 'filtercolor-blue': '#4C94B6',
 'filtercolor-brown': '#50443D',
 'filtercolor-gold': '#F6D069',
 'filtercolor-green': '#96B14D',
 'filtercolor-grey': '#A8AAA5',
 'filtercolor-orange': '#DB5E46',
 'filtercolor-pink': '#E78EB1',
 'filtercolor-purple': '#59547E',
 'filtercolor-red': '#D22200',
 'filtercolor-silver': '#EBEBEB',
 'filtercolor-white': '#FFF'
};
$('.facet-options-list li input[id*=filtercolor]').each(function() {
 var filterColor = $(this).attr('id');
 activeFilterBg = filterBgColor[filterColor];
});

• Jordan Running: +1 for pointing out that the array is unnecessary. It's worth noting, though, that property names with dashes in them (e.g. filtercolor-black) need to be quoted: var filterBgColor = { "filtercolor-black": "#171710", ... };.
• Guffa: @Jordan: Good catch, I didn't think of that when copying the code.

Answer 2

Check the object first with hasOwnProperty - and if the property exists, use it!

$('.facet-options-list li input[id*=filtercolor]').each(function() {
 var filterColor = this.id; //$(this).attr('id');
 var color;
 if (filterBgColor.hasOwnProperty(filterColor) {
 color = filterBgColor[filterColor];
 } else {
 color = "#FFF"; //not found
 }
});

Answer 3

mapping the id to the color should be as simple as

var filterColor = $(this).attr('id');
var hexCode = filterBgColor[filterColor];
//then do whatever with the hexCode