0
\$\begingroup\$

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();
}
\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – delete me May 11 '12 at 6:52
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ 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! \$\endgroup\$ – HandiworkNYC.com May 11 '12 at 16:39
  • \$\begingroup\$ Sure, answer edited. The only difference is that you get to give everything variable names instead of just referring to it by number. \$\endgroup\$ – delete me May 11 '12 at 19:33
1
\$\begingroup\$
//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();
}​
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.