Help me condense a series of lengthy javascript conditional arrays

Question

I'm not too used to working with arrays in javascript, so was wondering if there is a good way to condense this down.

Any pointers much appreciated!

you can see it in action @ http://www.productionlocations.com/locations

if($('.filters').length) {
    if(url === 'http://www.productionlocations.com/locations' || url === 'http://www.productionlocations.com/locations/') {
        searchval[0] = 'Find a location…';
        searchval[1] = 'Try searching by zip code, like 90012…';
        searchval[2] = 'Know your location ID? Find it like so: #xxxx';
        searchval[3] = 'Search locations by type, like apartment, office, or retail...';
        searchval[4] = 'Search locations by area, like downtown, Pasadena, or Hollywood...';
        searchval[5] = 'Search locations by style, like art deco, tudor, or industrial...';
        searchval[6] = 'Search locations by feature, like fireplace, pond, or tiled floors...';
    } else {
        searchval[0] = 'Modify your search by type, like apartment, office, or retais...';
        searchval[1] = 'Modify your search by area, like downtown, Pasadena, or Hollywood...';
        searchval[2] = 'Modify your search by style, like art deco, tudor, or industrial...';
        searchval[3] = 'Modify your search by feature, like fireplace, pond, or tiled floors...';
        searchval[4] = 'Modify your search…';
        searchval[5] = 'Modify your search by zip code, like 90012…';
    }

    searchkey = Math.floor(Math.random() * searchval.length);
    $('#s').val(searchval[searchkey]);
} else {
    searchval[0] = 'Find a location…';
    $('#s').val(searchval[0]);
    inputReplace();
}

What are the intended effects of this code? Do you just want to call the appropriate $('#s').val() and inputReplace() if necessary, or do you also want to keep searchval and searchkey around? — delete me
– delete me, Commented May 11, 2012 at 6:52

delete me · Accepted Answer · 2012-05-11 19:54:58Z

Assuming the variables you're using aren't needed later, you can condense it down to this:

var messages = [
    'Find a location…',
    'Try searching by zip code, like 90012…',
    'Know your location ID? Find it like so: #xxxx',
    'Search locations by type, like apartment, office, or retail...',
    'Search locations by area, like downtown, Pasadena, or Hollywood...',
    'Search locations by style, like art deco, tudor, or industrial...',
    'Search locations by feature, like fireplace, pond, or tiled floors...',
    'Modify your search…',
    'Modify your search by zip code, like 90012…'
], messageSets = [
    [3, 4, 5, 6, 7, 8],
    [0, 1, 2, 3, 4, 5, 6],
    [0]
];

var s = messageSets[$('.filters').length ? +/^\/locations\/?$/.test(location.pathname) : 3];
$('#s').val(messages[s[Math.random() * s.length | 0]]);
inputReplace();

Ideally the first var statement would be at a higher level, so it would only be run once, not every time the function is executed.

You could shorten it even further by using ranges instead of sets, but that could get complicated if you want to add more messages later. On the flip side, if you are planning to add a lot more messages, it would probably be clearer to make messages and messageSets objects (= dictionaries), so that you can name each message and set.

edit: here's how you would do the same thing using objects instead of arrays. The only difference is that each message, and set, has a name instead of a number, which makes references to it clearer to read.

var messages = {
    default: 'Find a location…',
    zip: 'Try searching by zip code, like 90012…',
    id: 'Know your location ID? Find it like so: #xxxx',
    type: 'Search locations by type, like apartment, office, or retail...',
    area: 'Search locations by area, like downtown, Pasadena, or Hollywood...',
    style: 'Search locations by style, like art deco, tudor, or industrial...',
    feature: 'Search locations by feature, like fireplace, pond, or tiled floors...',
    modify: 'Modify your search…',
    modify_zip: 'Modify your search by zip code, like 90012…'
}, messageSets = {
    locations: 'default zip id type area style feature'.split(' '),
    filters: 'type area style feature modify modify_zip'.split(' '),
    default: ['default']
};

var s = messageSets[$('.filters').length ?
    /^\/locations\/?$/.test(location.pathname) ? 'locations' : 'filters' :
    'default'
];
$('#s').val(messages[s[Math.random() * s.length | 0]]);
inputReplace();

Note that this has the additional advantage of making the order of the objects not matter: you could add alert: 'Enter something!', directly under the first line and it wouldn't break anything.

Hey Boost, could you elaborate on using messages and messageSets as objects? I think I will be adding more messages and making it more complex in the future. thanks! — HandiworkNYC.com
– HandiworkNYC.com, Commented May 11, 2012 at 16:39
Sure, answer edited. The only difference is that you get to give everything variable names instead of just referring to it by number. — delete me
– delete me, Commented May 11, 2012 at 19:33

Joseph · Accepted Answer · 2012-05-11 02:53:26Z

//use array literal
var searchval = [];

//cache length, if ever it's needed more than once
var filterLength = $('.filters').length;

//cache the condition, for readability
var url = url === 'http://www.productionlocations.com/locations' || url === 'http://www.productionlocations.com/locations/';

//cache s because it's used more than once
var s = $('#s');

if(filterLength) {
    if(url) {
        searchval = [
            'Find a location…',
            'Try searching by zip code, like 90012…',
            'Know your location ID? Find it like so: #xxxx',
            'Search locations by type, like apartment, office, or retail...',
            'Search locations by area, like downtown, Pasadena, or Hollywood...',
            'Search locations by style, like art deco, tudor, or industrial...',
            'Search locations by feature, like fireplace, pond, or tiled floors...'
        ]
    } else {
        searchval = [
            'Modify your search by type, like apartment, office, or retais...',
            'Modify your search by area, like downtown, Pasadena, or Hollywood...',
            'Modify your search by style, like art deco, tudor, or industrial...',
            'Modify your search by feature, like fireplace, pond, or tiled floors...',
            'Modify your search…',
            'Modify your search by zip code, like 90012…'
        ]
    }

    //if needed elsewhere, it's ok to store in variable
    searchkey = Math.floor(Math.random() * searchval.length);
    s.val(searchval[searchkey]);

    //otherwise, just use directly
    //s.val(searchval[Math.floor(Math.random() * searchval.length)]);

} else {

    //if needed elsewhere, it's ok to store in array
    searchval[0] = 'Find a location…';
    s.val(searchval[0]);

    //otherwise, just use the string directly
    //s.val('Find a location…');

    inputReplace();
}

Stack Exchange Network

Help me condense a series of lengthy javascript conditional arrays

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Help me condense a series of lengthy javascript conditional arrays

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions