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?

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" — Jordan Running
– Jordan Running, Commented Oct 22, 2015 at 18:32
Thanks @Jordan, I'm still just starting to wade into JS, thats a really helpful distinction. — Josh Burdick
– Josh Burdick, Commented Oct 22, 2015 at 18:44

Guffa · Accepted Answer · 2015-10-22 20:40:14Z

3

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

edited Oct 22, 2015 at 20:40

answered Oct 22, 2015 at 18:26

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

2 Comments

Jordan Running Over a year ago

+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 Over a year ago

@Jordan: Good catch, I didn't think of that when copying the code.

tymeJV · Accepted Answer · 2015-10-22 18:19:11Z

1

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

answered Oct 22, 2015 at 18:19

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

hair raisin · Accepted Answer · 2015-10-22 18:19:26Z

0

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

answered Oct 22, 2015 at 18:19

hair raisin

2,62817 silver badges13 bronze badges

Collectives™ on Stack Overflow

Assign value of variable from JS array based on key

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related