3

I'm trying to simplify many if then statements into just one if statement with 2 arrays.

So if I have this:

if (city == 'Atlanta'){
    jQuery('#cit').HTML('Atlanta');
    jQuery('#pho').HTML('555-555-5555');
}
else if (city == 'Portland'){
    jQuery('#cit').HTML('Portland');
    jQuery('#pho').HTML('666-666-6666');
}
else if (city == 'StLouis'){
    jQuery('#cit').HTML('St Louis');
    jQuery('#pho').HTML('777-777-7777');
}

I'm trying to simplify it so that it's just in two or three arrays with only one if statement. Such as [Atlanta, Portland, StLouis], [Atlanta, Portland, St Louis], [555-555-5555, 666-666-6666, 777-777-7777] that way it's easier to edit in the future, plus it would be editable by someone without good knowledge of JS.

Any ideas how to achieve such a thing?

zen
  • 1,115
  • 3
  • 28
  • 54
  • What arrays are you referring to? Are you looking for a `switch(expression) ... case...` statement? – km6zla Jun 11 '13 at 16:22

5 Answers5

9

Store the data in an object with the city as the key and an array as the value, which hold the real name and phone number:

var data = {
    'Atlanta':  ['Atlanta', '555-555-555'],
    'Portland': ['Portland', '666-666-6666'],
    'StLouis':  ['St Louis', '777-777-7777'],
    // ...
};
jQuery('#cit').HTML(data[city][0]);
jQuery('#pho').HTML(data[city][1]);
  • This is the cleanest solution to me. Thanks – zen Jun 11 '13 at 16:34
  • @zen ,No this is not the best way or maybe I can say it's a wrong way to store data like this:because the data is not readonly,It's hard for you to change the value if you store data like this for you can't fetch a value through a key! – teemo Jun 11 '13 at 16:40
  • I just tried the solution he provided and it works perfectly. What's wrong with fetching it as `data[city][0]`? – zen Jun 11 '13 at 16:43
  • 3
    @zen: Nothing, as long as you're not planning on attaching loads more of data along with the keys. You're fine for something simple like this. –  Jun 11 '13 at 16:44
  • Exactly what I thought. Thanks! – zen Jun 11 '13 at 16:46
4

Use Json to store your data like thie

var cities = {
    Atlanta:{name:'Atlanta',pho:'555-555-5555'},
    Portland:{name:'Portland',pho:'333-333-333'}    
}

then you can fetch the value like this:

jQuery('#cit').HTML(cities['Atlanta'].name);
teemo
  • 75
  • 5
4

Create an object and refer to it, without having to use loops and conditionals:

var cities = {
    Atlanta: {
        name: 'Atlanta',
        phone: '555-555-5555'
    },
    Portland: {
        name: 'Portland',
        phone: '666-666-6666'
    },
    StLouis: {
        name: 'St. Louis',
        phone: '777-777-7777'
    }
};

$('#cit').text(cities[city].name);
$('#pho').text(cities[city].phone);
Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
  • Thanks. Similar to @Tim Cooper 's solution. – zen Jun 11 '13 at 16:35
  • @zen, actually it's closer to teemo's solution, subtly different from Tim Cooper's. You're spoiled for choices! ;) Lots of "correct" answers to pick from, showing there are many ways to skin a cat. – Derek Henderson Jun 11 '13 at 16:39
1

instead of using an if statement consider using a switch like so

jQuery('#cit').HTML(city);
switch(city)
{
   case"Atlanta":
     jQuery('#pho').HTML('555-555-5555');
   break;
   case"Portland":
     jQuery('#pho').HTML('666-666-6666');
   break;
   case"StLouis":
     jQuery('#pho').HTML('777-777-7777');
   break;
}

The person editing would just need to add, remove and edit the 'case's in the switch. there is no limit to amount of cases you can have in a switch.

azzy81
  • 2,261
  • 2
  • 26
  • 37
  • 6
    `jQuery('#cit').HTML(city)` could be brought out of the switch statement to reduce duplicate code – Assimilater Jun 11 '13 at 16:25
  • Pretty good, but was looking for a cleaner solution. Still better than a bunch of if statements though. Thanks – zen Jun 11 '13 at 16:37
  • @SubstanceD, if you do it this way, you get 'StLouis' instead of 'St Louis'! – Derek Henderson Jun 11 '13 at 16:44
  • yes I did see that Derek. However this was only a matter of assign city to #cit globaly at the top like my example or set it each time and specify the location manually. I thought it best to put more emphasis on the switch solution rather than explaining how to output the city name but a valid point none the less =) – azzy81 Jun 12 '13 at 13:46
1

Put the cities into an array of object literals, then you can loop through the array and populate the page elements with data from the object.

var cities = [
{code: 'Atlanta', name: 'Atlanta', phone: '555-555-5555'},
{code: 'Portland', name: 'Portland', phone: '666-666-6666'},
{code: 'StLouis', name: 'St Louis', phone: '777-777-7777'},
];

for(var i = 0, l = cities.length; i < l; i++){
    if(cities[i].code===city) {
       jQuery('#cit').HTML(cities[i].name);
       jQuery('#pho').HTML(cities[i].phone);

     }
}
DaveB
  • 9,470
  • 4
  • 39
  • 66