根据键从JS数组分配变量的值

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?

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];
});

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