Refactoring a large block of chained if-else statements

Question

This seems like overkill and I would like to refactor this...any suggestions

    if($(this).text() == \"Grocery\"){
        $(\".type_changer\").attr(\"id\",         


        

Answer 1

Have an array that contains the value (eg: Salon, Grocery) and also contains the replacement (eg: sal, gro) and replace with that. The alternative is to simply take the first 3 letters and lowercase them but this may cause issues with things that contain only 2 letters then a space if we assume you'll be expanding the list, if not you can go with simply lowercasing the first 3 letters. If you need code examples, just say :)

Answer 2

started writing pseudocode for a switch statement, then thought of this :

//make your 2D array (or key->value pair if you like)
var hash = [ ["Grocery","gro"],
             ["Restaurant","res"],
             //etc....
           ];

//loop thru your text(), checking to see if it matches any 0th item in your hash
foreach(e in hash) {
    if($(this).text() == hash[e][0] {
        //aha! match found
        $(".type_changer").attr("id", hash[e][1]);
    }

}

//disclaimer : untested code, but you should get the gist of it from this

Answer 3

Look here,

if($(this).text() == "Grocery"){
    $(".type_changer").attr("id", "gro");
}else if($(this).text() == "Restaurant"){
    $(".type_changer").attr("id", "res");
}else if($(this).text() == "Bar"){
    $(".type_changer").attr("id", "bar");
}else if($(this).text() == "Pizza Delivery"){
    $(".type_changer").attr("id", "piz");
}else if($(this).text() == "Quick Service"){
    $(".type_changer").attr("id", "qui");
}else if($(this).text() == "Retail"){
    $(".type_changer").attr("id", "ret");
}else if($(this).text() == "Salon"){
    $(".type_changer").attr("id", "sal");
}

You have to think all the repetitions away. What would left over? Right, the text and id values:

"Grocery", "gro"
"Restaurant", "res"
"Bar", "bar"
"Pizza Delivery", "piz"
"Quick Service", "qui"
"Retail", "ret"
"Salon", "sal"

Let hold them in some data structure. An object is an obvious choice.

var types = {
    "Grocery": "gro",
    "Restaurant": "res",
    "Bar": "bar",
    "Pizza Delivery": "piz",
    "Quick Service": "qui",
    "Retail": "ret",
    "Salon": "sal"
}

It can be accessed like an associative array with dynamic keys. Now you can use a single line:

$(".type_changer").attr("id", types[$(this).text()]);

How to replace the second part is left as exercise to you, but it boils down to the same.

---

Update: you seem to have a hard time in understanding this. Here's an explanation from my side:

When $(this).text() returns "Grocery", the above will resolve to

$(".type_changer").attr("id", types["Grocery"]);

The types["Grocery"] will in turn return "gro", so it basically ends up as

$(".type_changer").attr("id", "gro");

when $(this).text() is "Grocery".

See also:

• JavaScript Object Notation (JSON) tutorial

Answer 4

var textToVal =
{
    "Grocery" : "gro",
    "Restaurant" : "res"
    // and so on ...
};

for (var text in textToVal) {
    if ($(this).text() == text)
        $(".type_changer").attr("id", textToVal[text]);
}

Answer 5

Use class instead of id as inner wrapper

use array to store your custom text for matching later

$('.selector').each(function() {}

in this way you can make process common

use array replace method

from = ['Grocery','Restaurant']
to = ['gro','res']