Shorthand version for javascript array condition

Question

I have 10 arrays of color styles in my JavaScript file. What I need is to check if the currently selected value in a dropdown list is equal to one of the array names I created, and assign the array once changed.

Here are 2 of the arrays:

var red = {
    primary_color: 'red',
    primary_hover_color: 'black',
    menu_color: '#9c9fa3'
}

var yellow = {
    primary_color: '#22c39b',
    primary_hover_color: '#187e65',
    menu_color: '#9c9fa3'
}

Then I also have this for the dropdown:

$('#color_palette').change(function() {
    var palette = $(this).val();

    if (palette = 'red') { palette = red }
    if (palette = 'yellow') { palette = yellow }
    // etc etc
});

I was wondering if there's a shorthand version of this instead of having to check an if condition for each value and make this more 'dynamic' rather than hardcode each color value in the condition.

Please, learn javascript first. Those are not arrays. The if has no boolean condition but assignments. — Serabe, Nov 12 '12 at 21:00
possible duplicate of [Convert string to variable name in Javascript](http://stackoverflow.com/questions/5613834/convert-string-to-variable-name-in-javascript) — sachleen, Nov 12 '12 at 21:01
I'm learning it, hence my question... and aren't they array objects? — mousesports, Nov 12 '12 at 21:02
@mousesports, No, they are just "objects". Arrays use `[]` syntax. Also, don't know why anyone is downvoting this question... it is perfectly legitimate. — Brad, Nov 12 '12 at 21:03
They are objects. All arrays are objects, but not all objects are arrays. — Kevin B, Nov 12 '12 at 21:04

score 2 · Accepted Answer · edited Nov 12 '12 at 21:02

2

You can put your colors in a single object

var colors = {
red: {
  primary_color: 'red',
  primary_hover_color: 'black',
  menu_color: '#9c9fa3'
},

yellow: {
  primary_color: '#22c39b',
  primary_hover_color: '#187e65',
  menu_color: '#9c9fa3'
}
}

Then change your check to

$('#color_palette').change(function() {
    var palette = colors[$(this).val()];
});

edited Nov 12 '12 at 21:02

sachleen

30,730
8
78
73

answered Nov 12 '12 at 21:01

lostsource

21,070
8
66
88

score 1 · Answer 2 · answered Nov 12 '12 at 21:01

1

You could arrange your palettes:

var palettes = {
   red: red,
   yellow: yellow
};

And then access them like so

var palette = palettes[palette];

answered Nov 12 '12 at 21:01

David Hedlund

128,221
31
203
222

score 1 · Answer 3 · answered Nov 12 '12 at 21:01

Firstly, lets fix the problems in the code you've posted;

What you have is not an array, it's an object declared via object literal syntax.
if (palette = 'red') is setting palette to "red"; it's not doing any comparison; thats == and ===. What you should have is:
```
if (palette === "red")
```

In your change handler you're overwriting your variable palette which contains the value the user selected with the contents of each if block.

$('#color_palette').change(function() {
    var palette = $(this).val(); // <-- set here

    if (palette = 'red') { palette = red  // <--- overwritten here}
    if (palette = 'yellow' /* well, and here, but we fixed that in #2 */) { palette = yellow }
    // etc etc
});

What you should look at doing is containing all of your color styles in a mother-object;

var styles = {
    red: {
        primary_color: 'red',
        primary_hover_color: 'black',
        menu_color: '#9c9fa3'
    },
    yellow: {
        primary_color: '#22c39b',
        primary_hover_color: '#187e65',
        menu_color: '#9c9fa3'
    }
};

Then what you can do in your change function is simply:

$('#color_palette').change(function() {
    palette = styles[$(this).val()];
});

score 0 · Answer 4 · answered Nov 12 '12 at 21:02

I would have an object of palettes:

palettes = {
    red: {
        primary_color: 'red',
        /* etc. */
    }, 
    yellow: {
         primary_color: 'yellow',
        /* etc. */
    }
}

Then, you could select it easily:

var selectedPalette = palettes[$(this).val()];

Shorthand version for javascript array condition

4 Answers4